Измените или подкачайте CSS нескольких элементов HTML сразу
У меня есть приблизительно 100 <span class="foo">, 100 <span class="bar"> и 100 <span class="baz"> теги в моем документе. Я должен реализовать следующие операции в JavaScript:
- Измените фон весь foos на красный, все панели к зеленому, все основания к синему.
- Измените фон весь foos на зеленый, все панели к синему, все основания к красному.
- Измените фон весь foos на синий, все панели к красному, все основания к зеленому.
Я позвоню этим операциям по поводу приблизительно 1 000 раз в целом, таким образом, я хотел бы избежать решения, которое добавляет a <style> отметьте к <head> каждый раз я делаю операцию.
Есть ли что-то более простое или более быстрое или лучшее, чем итерация по всем <span> элементы с document.getElementsByTagName('span'), и изменение или добавление к .className Свойства DOM для каждого элемента?
2 ответа
Самый простой способ - использовать для этого CSS, а не менять имена классов элементов. Рассмотрим следующую разметку и CSS.
.normal .foo{
background-color: #0f0;
}
.alternate .foo {
background-color: #f00;
}
<body class="normal">
<span class="foo">hello</span>
<span class="bar">hello</span>
<span class="baz">hello</span>
</body>
Вы можете просто использовать javascript для изменения имени класса в теле с обычного на альтернативное, чтобы реализовать изменение цвета для элементов .foo. Дополнительные правила зададут цвета для bar и baz.
document.getElementsByTagName('body')[0].className = 'alternate';
Вы можете присвоить телу документа класс, определяющий, какая конфигурация цветов должна использоваться, а затем просто стилизовать развороты соответствующим образом.
eg:
.configTypeOne span.foo{...}
.configTypeTwo span.foo{...}
Если вы будете менять стили на одной и той же странице через некоторое время, то достаточно будет небольшого JS для изменения класса тела.