Применение одного и того же атрибута CSS к нескольким элементам

0

У меня есть ряд элементов (более 20), которым нужен цвет, который вводит пользователь. Используя PHP + CSS, я получаю этот результат:

#one, #two, #three, #four, #five, #etc { color: #222; }

Он отлично работает, но теперь мне нужно отредактировать этот цвет после загрузки DOM с помощью jQuery/Javascript. Опять же, это будет вход пользователя, поэтому цвет может быть любым.

Есть ли быстрый способ применить изменения ко всем элементам одновременно? Или мне нужно сделать следующее?

$('#one').css('color', newColor );
$('#two').css('color', newColor );
.... etc

Я надеюсь, что есть способ, потому что, как я уже упоминал, есть более 20 элементов, которые нуждаются в этом изменении. Спасибо, парни

Теги:

2 ответа

6
Лучший ответ

Ты можешь сделать:

$('#one, #two, #three, #four, #five, #etc').css('color', newColor );

Но если у вас есть общий класс, назначенный им, это делает его более легким.

$('.commonCls').css('color', newColor );

Или если эти элементы говорят div (и являются единственными элементами) и внутри контейнера- container то вы могли бы просто сделать.

 $('.container').find('div').css('color', newColor);

и лучше, если вы знаете цвет заранее, просто добавьте cssrule для имени класса и добавьте этот класс к этим элементам, что поможет больше в каскадировании, чем указание цвета inline (что делает css()).

$('.commonCls').addClass(newClass);

чтобы добавить, если вам нужно использовать идентификатор, и если ваши идентификаторы имеют общую часть. ex: #one-Section, #two-Section etc.. тогда вы можете использовать атрибут endswith selector ($), у вас есть (*) и startswith (^) селектор.

$('[id$="Section"]').addClass(newClass); //or .css
Поделиться
  • 1
    +1 за создание общего класса
  • 0
    Отличный ответ! Большое спасибо.
Показать ещё 5 комментариев
0

Вы можете использовать селектор классов.

$('.myclass').css('color', newColor );

or

$('#one, #two, #three, #four, #five, #etc').css('color', newColor );
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню