Добавление/изменение свойств во всех тегах типа (странные результаты)
Я ищу способ добавить/изменить некоторые свойства во всех тегах определенного типа после загрузки страницы.
Я нашел два пути. Но по какой-то причине, которую я не понимаю, результаты разные.
Способ 1 — добавление тега стиля в качестве последнего дочернего элемента <html>.
var style = document.createElement( "style" );
style.innerHTML = `
div {
background-color: black;
color: white;
}
`;
document.documentElement.appendChild( style );
Результат тега стиля как последнего дочернего метода HTML
Способ 2. Получение всех тегов этого типа и болезненное их изменение.
var elems = document.body.getElementsByTagName("div");
for( let i = 0; i < elems.length; i++ ){
elems[i].style.backgroundColor = "black";
elems[i].style.color = "white";
}
Результат петлевого/поточного метода
Поэтому мне было интересно, почему результаты между двумя методами различны, и я также рад узнать о других методах изменения всех тегов типа, конечно.
@vanowm Понятно, я предполагал, что, поскольку стили добавляются в самом конце, они будут иметь приоритет. И я видел, как встроенные свойства/атрибуты также игнорировались, что может отменить приоритет встроенных?
Ответы 3
- первый метод создает тег
<style>и устанавливает его атрибуты, как если бы вы писали css в теге<style>или вводили его через<link> - второй метод использует атрибут
styleкаждого тега, который также является стандартом W3C, но ограничен только этим тегом и имеет синтаксические ограничения (не может использовать селекторы, такие как:hover,:focus...)
2-й метод быстрее, чем 1, имеет более высокий приоритет и не содержит ошибок в отношении scoped, он предпочтительнее в javascript.
Действительно? Второй метод (цикл/инлайн) быстрее? Я бы подумал, что ручное изменение их одного за другим было бы намного менее эффективным, чем тег стилей, который специально предназначен для воздействия на многие теги одного типа.
Вы можете так подумать, потому что javascript выглядит тяжелым, но на самом деле создание тега стиля заставляет браузер делать больше, чем он должен взаимодействовать с DOM (это дорого), просматривать все индексы в поисках селекторов и, наконец, то же самое реализует ответ css
Я был так же сбит с толку, как и вы, пока не провел тесты производительности. метод с использованием class почти эквивалентен style, и они оба быстрее, чем <style>
Если вам нужно изменить 2 или более свойств, которые вы можете использовать class, это легко и быстро написать
Хм, отличный совет, спасибо. И это верно независимо от того, сколько тегов задействовано (например, 300+)?
Я думаю, что класс не подходит для моей цели, так как это не мой HTML. Поэтому мне нужно сначала создать элемент стиля, как в методе 1, добавить свойства класса, а затем добавить класс к каждому тегу типа. Или вы хотите сказать, что это также быстрее?
Если вы не можете вставить <style> сразу после загрузки страницы, то style будет быстрее, чем class. на ваш вопрос style будет быстрее, чем <style> даже с 300+ элементами, которые я тестировал на своем сайте, состоящем примерно из 2000 элементов
Просто class выглядит чище. вы также можете обратиться к .cssText, он будет писать более аккуратно, чем style за почти эквивалентную стоимость
Я бы не смог ничего изменить, пока страница не загрузится полностью, нет. Блин, я невероятно удивлен, что это быстрее даже с таким большим количеством элементов, определенно супер полезно знать, спасибо. Аккуратность активного HTML не проблема, так что все в порядке. И я хотел бы использовать .cssText, но я не могу его использовать, так как не хочу удалять какие-либо другие ранее установленные свойства стиля в этих элементах.
Здесь метод 1 добавляет новый тег стиля в документ и применяет стили CSS с помощью innerHTML. Все теги на странице, соответствующие селектору div, будут иметь стили, использующие эту технику. Однако, в зависимости от того, сколько стилей требуется, этот метод может привести к более медленной загрузке страницы.
Затем другой метод, который выбирает свойства фона и цвета каждого элемента div на странице, перебирая их все. Этот подход быстрее, потому что не нужно ждать загрузки новых стилей.
Итак, еще один метод, который вы можете использовать, просто немного изменив свой второй метод:
var elems = document.querySelectorAll("div");
for( let i = 0; i < elems.length; i++ ){
elems[i].style.backgroundColor = "black";
elems[i].style.color = "white";
}
Тем не менее, вы также можете использовать Jquery для быстрого выполнения:
$("div").css({
"background-color": "black",
"color": "white"
});
Изменение свойства style элемента аналогично изменению атрибута стиля.
Разница была в приоритете. Те же встроенные результаты метода 2 (цикл / встроенный) были достигнуты с помощью метода 1 (<style> как последний дочерний элемент) путем добавления правила !important из-за повышенного приоритета. Вот так:
div {
background-color: black !important;
color: white !important;
}
Простой пример, демонстрирующий, как легко и полностью отменить все изменения и вернуться к исходному HTML:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: red;
}
</style>
</head>
<body>
<p>Text sample.</p>
<p style = "background-color: grey">Text sample.</p>
<button onclick = "test1()">Remove temporary changes</button>
</body>
<script>
function test1() {
document.getElementById("tempChanges").remove();
}
</script>
<style id = "tempChanges">
p {
background-color: green !important;
}
</style>
</html>
Хотя !important работает, это не рекомендуется, потому что его сложнее перезаписать, если вам нужно, например, на определенной странице или в строке для определенного элемента.
@CanO'Spam Спасибо. Да, я понимаю это, но для моего варианта использования он должен иметь наивысший приоритет и действует только временно.
Это может быть приоритет, с которым движок CSS применяет стиль. Встроенные стили перезаписывают стили CSS.