Я хочу перекосить тег списка, используя встроенный JavaScript.Встроенный JavaScript с CSS
Вот li теги и метод, к которому он называет:
<li onPageload=
"myFunction(element.style.webkitTransform = "skew(-25deg)"; ">
</li>
Однако, это не работает. Где я ошибался?
Inline js никогда не был хорошей практикой. Прочитайте некоторые из этих результатов: https://www.google.com/search?q=Why+is+inline+js+bad%3F
Inline js вредит читабельности, разделяет проблемы, ремонтопригодность, имеет неожиданные результаты и, как вы можете видеть здесь, странно писать.
Ниже приведено чистое решение для добавления стиля с помощью js. Мои комментарии в коде объясняют, что происходит.
Пример разметки:
<ul>
<!-- the class here is just for the example - something to select the elements by -->
<li class="skew-this"></li>
<li class="skew-this"></li>
</ul>
CSS:
/* this class will be added to the elements so this style is applied */
.skewed {
-webkit-transform: skew(-25deg);
transform: skew(-25deg);
}
JavaScript:
//this is the proper way to fire a function on page load
window.addEventListener('load', function() {
//get element references
var lis = document.getElementsByClassName('skew-this');
//loop through the selected elements
for (var i=0; i<lis.length; ++i) {
var li = lis[i];
//add "skewed" to the element's className - now it is styled!
li.className = li.className+' skewed';
}
});
Чтобы ответить на ваш вопрос более непосредственно (я не рекомендую этот подход!):
<!-- call "loadFunc" on page load -->
<body onload="loadFunc()">
<ul>
<!-- "skew" is the name of the function that will be called for this element on page load -->
<li load="skew"></li>
<li load="skew"></li>
</ul>
</body>
JavaScript:
//this is called when the page is loaded
function loadFunc() {
//get element references that have "load" attribute
var lis = document.querySelectorAll('li[load]');
//loop through elements
for (var i=0; i<lis.length; ++i) {
var li = lis[i];
//get the "load" function name ("skew" in this example)
var func = li.getAttribute('load');
//call the function, passing in the element
window[func](li);
}
}
function skew(elem) {
//skew the element
var val = 'skew(-25deg)';
elem.style['-webkit-transform'] = val;
elem.style.transform = val;
}
Почему бы просто не использовать CSS? Для этого конкретного случая использования он выглядит намного яснее и достигнет того же результата.
<li class="bra" style="-webkit-transform: skew(-25deg); transform: skew(-25deg);"></li>
Как MistressDavid указывает, y ou может использовать одинарные кавычки вместо двойных кавычек вокруг строки, которую вы назначаете element.style.webkitTransform.
Как поясняет Джеффри Хинг, вам, скорее всего, будет лучше использовать CSS вместо JavaScript для достижения такого же эффекта.
И, конечно же, встроенный JS является корнем всего зла, как объясняет m59. :} Да, аргументы заслуживают; Я просто думаю, что они не суть здесь - то же самое с переходом на одинарные кавычки или CSS.
Никто не изложил основную проблему, с которой вы столкнулись в первую очередь: вы прекратили значение атрибута HTML с двойными кавычками с двойной котировкой JavaScript внутри него.
В чистом JavaScript, вы можете увидеть проблему в следующем:
alert("Hello, "world"!"); // malformed - the first double quote inside the
// double-quoted alert argument terminating it,
// the second starting a new double-quoted string
// altogether
Применение лекарства MistressDavid, вы могли бы решить эту проблему с одинарными кавычками внутри alert аргумента;
alert("Hello, 'world'!"); // works - but maybe not what you want
Однако, если вы действительно хотите двойные кавычки world в вашем alert аргумент, вам нужно бежать им:
alert("Hello, \"world\"!"); // works - with those must-have double quotes
Теперь вот проблема с второе средство, применимое к атрибуту HTML, как и у вас: стандартный escape-контроль обратного слэша JavaScript не работает. Собираем наш alert в атрибут HTML, вместо этого вам нужно будет ...
<a href="javascript:alert("Hello, \"world\"!");">Whatever</a>
^^^^^^ ^^^^^^^ ^^^^^^^ ^^^^^^
... где двойные кавычки HTML кодируются и те, внутри alert аргумента, кроме того, обратный слеш экранированы, как требуется JavaScript.
Я говорю все это, потому что в моем сознании важно то, что вы должны изучить из этой проблемы так же, как вы должны ее обойти, - что некоторые символы в строках на разных языках программирования должны быть экранированы.
Экранирование в строках - такая распространенная потенциальная проблема, о которой я думаю, что вы должны как можно больше узнать об этом. Он хорошо послужит вам в JavaScript, C#, T-SQL или практически любом другом языке.
Теперь, сказав все это, попробуйте выбрать более элегантные способы достижения эффекта, который вы ищете. :)
Пожалуйста, измените название класса –
Я не понимаю, что вы делаете. Где находится переменная 'element'? И почему вы выполняете задание в аргументе функции? Я знаю, что это действительно так, но это кажется странным. – Barmar
Что такое 'onPageload'? – Teemu