Изменить или поменять CSS нескольких элементов HTML одновременно - PullRequest
Новая
       14

Изменить или поменять CSS нескольких элементов HTML одновременно

5 голосов
/ 21 февраля 2010

У меня есть около 100 <span class="foo">, 100 <span class="bar"> и 100 <span class="baz"> тегов в моем документе.Мне нужно реализовать следующие операции в JavaScript:

  • Измените фон все foos на красный, все столбцы на зеленый, все bazes на синий.
  • Измените фон all foos на зеленый, все столбцы синего цвета, все базисы красного цвета.
  • Измените фон, все столбцы синего цвета, все столбцы красного цвета, все базисы зеленого цвета.

Эти операции я буду называтьВ общей сложности 1000 раз, так что я бы хотел избежать решения, которое добавляет тег <style> к <head> каждый раз, когда я выполняю операцию.

Есть ли что-то проще, быстрее или лучше, чем повторение по всем<span> элементов с document.getElementsByTagName('span'), а также изменение или добавление к .className свойствам DOM для каждого элемента?

Ответы [ 2 ]

9 голосов
/ 21 февраля 2010

Самый простой способ - использовать 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. Дополнительные правила будут устанавливать цвета для бара и баз. 

document.getElementsByTagName('body')[0].className = 'alternate';
2 голосов
/ 21 февраля 2010

Вы можете дать телу документа класс, чтобы определить, какую конфигурацию цветов следует использовать, а затем просто соответствующим образом оформить интервалы.

например: 

.configTypeOne span.foo{...}
.configTypeTwo span.foo{...}

Если после некоторого промежутка времени вы меняете стили на той же странице, все, что требуется, - это маленький кусочек JS для изменения класса тела.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...