Изменение CSS классов через JavaScript
На предыдущем уроке мы разобрали, как можно менять отдельные CSS свойства у элементов при помощи JavaScript. Однако будет ли такое действие эффективным, если понадобится изменить сразу много свойств у объекта. И как следствие, придется написать много строк JavaScript кода.
К счастью есть другой способ, как одновременно присвоить много свойств элементу — это прописать ему название класса. Надо просто создать в CSS новый класс, прописать в нем все необходимые стили и затем динамически добавлять новые классы к объектам через JavaScript. Давайте заменим в этом параграфе цвет, толщину и шрифт у текста.
//HTML разметка
<div >
<h1 >Мудрая цитата</h1>
<p >Самая <span > важная</span> вещь — уметь наслаждаться <span > жизнью</span>
и быть <span > счастливым</span>. Это все, что имеет <span >значение</span>.
</p>
</div>
//CSS стили
.container <
width: 400px;
border: 8px solid plum;
margin: 20px auto;
>
#header <
font-size: 24px;
font-weight: 700;
color: purple;
font-family: 'Arial Narrow Bold', sans-serif;
text-align: center;
>
.text <
font-size: 18px;
font-weight: 200;
font-family: sans-serif;
text-align: center;
padding: 10px;
>
Изменение класса
Все перечисленные свойства для замены находятся в классе text. Создадим новый класс supertext, но с другими значениями.
.supertext <
font-size: 16px;
font-weight: 700;
font-family: Tahoma;
color:royalblue;
text-align: center;
padding: 10px;
>
Затем, чтобы присвоить параграфу новый класс, мы должны найти объект с классом text и через свойство className присвоить ему новый класс.
//JavaScript
let headerElement = document.querySelector('.text');
headerElement.className = «supertext»;
Теперь в HTML разметке у тега p появился новый класс supertext, вместо старого. И мы видим, как изменился внешний вид текста.
Добавление класса
Как быть, если мы хотим не заменять класс, а добавить новый класс к существующему. В этом случае, надо использовать оператор сложения с присваиванием (+=). Мы создали новый класс underline с одним единственным свойством подчеркивания.
.underline <
text-decoration: underline;
>
В цикле for JavaScript пройдется по всем тегам span с классом green и добавит к ним класс underline (с пробелом спереди). Так мы сохраним акцентные слова зелеными и добавим им подчеркивание. Обратите внимание, что для поиска нескольких элементов, мы использовали метод querySelectorAll.
let greenElement = document.querySelectorAll('.green');
for (let i = 0; i < greenElement.length; i++) <
greenElement[i].className += » underline»;
>
В HTML разметке произошли динамические изменения: теперь у тега span, есть два класса. Если бы мы не оставили перед underline пробел, то оба класса слились бы в одно слово. Тогда мы получили бы совсем другой результат.
Как изменить свойство класса с помощью js?
Есть div с классом mystyle . В классе есть свойство margin как его изменить с помощью обычного js или jquery?
Если нужно поменять во всех элементах этого класса:
Если прямо в стилях нужно поменять:
Невозможно переписывать CSS стиле с помощью JS. Лучше создай новый класс с нужными свойствами и добавляй его.
Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript html jquery css или задайте свой вопрос.
Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2022.6.13.42356
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Изменение CSS свойств с помощью JavaScript
Данная статья пригодится новичкам в веб-программировании. Буду подразумевать, что вам знаком «СИшный» синтаксис, который лежит в основе JavaScript, и получение ссылки на элемент — метод getElementById и сопутствующие — проблем не вызывает. Естественно, основы HTML и CSS вам также должны быть известны.
Для доступа к стилям существует специальное свойство объекта — style. Пусть на странице определён элемент с идентификатором elem:
Тогда, для доступа к его «стилевым» свойствам, можно использовать такой код (не пытайтесь использовать, вырвано из контекста!):
где ЦС — то свойство, к которому нужно обратиться или изменить.
Далее начинается пусть небольшая, но магия. Вам известны различные CSS свойства: background , border , display , font-size и т. п. Обратите внимание на последнее, в котором есть символ — (минус на клавиатуре). В названиях переменных такие дефисы использовать нельзя, поскольку в контексте программы они интерпретируются как знак вычитания. Для логического обоснования, маленький пример:
Если бы интерпретатор JavaScript допускал в именах символ минус, ему пришлось бы выполнить дополнительные действия:
- Проверить существование переменной font-size .
- Если её нет, попытаться выполнить арифметическое действие «вычитание» значения size из font .
Поэтому, имена свойств требуется «причесать» (нормализовать) для использования в коде. К счастью, определено всего 2 простых правила:
- Если знака минус нет (margin, border, width и прочее) — записывается как есть:
- Если знак минус присутствует, то он убирается, а следующая буква переводится в верхний регистр: background-color → backgroundСolor, z-index → zIndex и т. д.:
Вот так! Всё очень просто. Если вы знаете CSS свойства, значит, имеете возможность свободно ими рулить и в JavaScript. А попрактиковаться можете уже сейчас.
Ниже дан небольшой пример изменения свойств элемента с помощью JS. Если видете в названии слово color, это подразумевает задание цвета.
Думаю, нет нужды объяснять, что присвоение неверных значений игронируется?
- Попробуйте управлять этим списком.
- Сделать это совсем просто.
- Можете выбрать свойство color.
- Установите для него значение #0000dd
Выберите CSS-свойство и укажите корректное значение для него:
Свежим хлебушком типа батон —> 
днём интернета 
шоколадкой для работы мозга 
коробочкой ароматного чая для бодрости продлением домена —> 
продлением хостинга на +1 месяц