Стили и классы
До того, как начнёте изучать способы работы со стилями и классами в JavaScript, есть одно важное правило. Надеемся, это достаточно очевидно, но мы всё равно должны об этом упомянуть.
Как правило, существует два способа задания стилей для элемента:
- Создать класс в CSS и использовать его: <div >
- Писать стили непосредственно в атрибуте style : <div style=". "> .
JavaScript может менять и классы, и свойство style .
Классы – всегда предпочтительный вариант по сравнению со style . Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться».
Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript:
В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в CSS и добавляем класс (JavaScript может это сделать). Это более гибкое и лёгкое в поддержке решение.
className и classList
Изменение класса является одним из наиболее часто используемых действий в скриптах.
Когда-то давно в JavaScript существовало ограничение: зарезервированное слово типа "class" не могло быть свойством объекта. Это ограничение сейчас отсутствует, но в то время было невозможно иметь свойство elem.class .
Поэтому для классов было введено схожее свойство "className" : elem.className соответствует атрибуту "class" .
Если мы присваиваем что-то elem.className , то это заменяет всю строку с классами. Иногда это то, что нам нужно, но часто мы хотим добавить/удалить один класс.
Для этого есть другое свойство: elem.classList .
elem.classList – это специальный объект с методами для добавления/удаления одного класса.
Так что мы можем работать как со строкой полного класса, используя className , так и с отдельными классами, используя classList . Выбираем тот вариант, который нам удобнее.
- elem.classList.add/remove("class") – добавить/удалить класс.
- elem.classList.toggle("class") – добавить класс, если его нет, иначе удалить.
- elem.classList.contains("class") – проверка наличия класса, возвращает true/false .
Кроме того, classList является перебираемым, поэтому можно перечислить все классы при помощи for..of :
Element style
Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте "style" . Установка стиля elem.style.width="100px" работает так же, как наличие в атрибуте style строки width:100px .
Для свойства из нескольких слов используется camelCase:
Стили с браузерным префиксом, например, -moz-border-radius , -webkit-border-radius преобразуются по тому же принципу: дефис означает заглавную букву.
Сброс стилей
Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его.
Например, чтобы скрыть элемент, мы можем задать elem.style.display = "none" .
Затем мы можем удалить свойство style.display , чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = "" .
Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было.
Обычно мы используем style.* для присвоения индивидуальных свойств стиля. Нельзя установить список стилей как, например, div.style="color: red; width: 100px" , потому что div.style – это объект, и он доступен только для чтения.
Для задания нескольких стилей в одной строке используется специальное свойство style.cssText :
Это свойство редко используется, потому что такое присваивание удаляет все существующие стили: оно не добавляет, а заменяет их. Можно ненароком удалить что-то нужное. Но его можно использовать, к примеру, для новых элементов, когда мы точно знаем, что не удалим существующий стиль.
То же самое можно сделать установкой атрибута: div.setAttribute(‘style’, ‘color: red. ‘) .
Следите за единицами измерения
Не забудьте добавить к значениям единицы измерения.
Например, мы должны устанавливать 10px , а не просто 10 в свойство elem.style.top . Иначе это не сработает:
Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него.
Вычисленные стили: getComputedStyle
Итак, изменить стиль очень просто. Но как его прочитать?
Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?
Свойство style оперирует только значением атрибута "style" , без учёта CSS-каскада.
Поэтому, используя elem.style , мы не можем прочитать ничего, что приходит из классов CSS.
Например, здесь style не может видеть отступы:
…Но что, если нам нужно, скажем, увеличить отступ на 20px ? Для начала нужно его текущее значение получить.
Для этого есть метод: getComputedStyle .
Результат вызова – объект со стилями, похожий на elem.style , но с учётом всех CSS-классов.
Есть две концепции в CSS:
- Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125% .
- Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px .
Давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился.
Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях.
Для правильного получения значения нужно указать точное свойство. Например: paddingLeft , marginTop , borderTopWidth . При обращении к сокращённому: padding , margin , border – правильный результат не гарантируется.
Например, если есть свойства paddingLeft/paddingTop , то что мы получим вызывая getComputedStyle(elem).padding ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.
Посещённые ссылки могут быть окрашены с помощью псевдокласса :visited .
Но getComputedStyle не даёт доступ к этой информации, чтобы произвольная страница не могла определить, посещал ли пользователь ту или иную ссылку, проверив стили.
JavaScript не видит стили, применяемые с помощью :visited . Кроме того, в CSS есть ограничение, которое запрещает в целях безопасности применять к :visited CSS-стили, изменяющие геометрию элемента. Это гарантирует, что нет обходного пути для «злой» страницы проверить, была ли ссылка посещена и, следовательно, нарушить конфиденциальность.
Итого
Для управления классами существуют два DOM-свойства:
- className – строковое значение, удобно для управления всем набором классов.
- classList – объект с методами add/remove/toggle/contains , удобно для управления отдельными классами.
Чтобы изменить стили:
Свойство style является объектом со стилями в формате camelCase. Чтение и запись в него работают так же, как изменение соответствующих свойств в атрибуте "style" . Чтобы узнать, как добавить в него important и делать некоторые другие редкие вещи – смотрите документацию.
Свойство style.cssText соответствует всему атрибуту "style" , полной строке стилей.
Для чтения окончательных стилей (с учётом всех классов, после применения CSS и вычисления окончательных значений) используется:
- Метод getComputedStyle(elem, [pseudo]) возвращает объект, похожий по формату на style . Только для чтения.
Задачи
Создать уведомление
Напишите функцию showNotification(options) , которая создаёт уведомление: <div > с заданным содержимым. Уведомление должно автоматически исчезнуть через 1,5 секунды.
Пример объекта options :
Используйте CSS-позиционирование для отображения элемента в заданных координатах. Исходный документ имеет необходимые стили.
Как изменить свойство класса с помощью js?
Есть div с классом mystyle . В классе есть свойство margin как его изменить с помощью обычного js или jquery?
Если нужно поменять во всех элементах этого класса:
Если прямо в стилях нужно поменять:
Невозможно переписывать CSS стиле с помощью JS. Лучше создай новый класс с нужными свойствами и добавляй его.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.3.11.43304
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Изменение 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 пробел, то оба класса слились бы в одно слово. Тогда мы получили бы совсем другой результат.
Как изменить свойство класса CSS через JS?
Как с помощью JS сделать так, что бы при нажатии на кнопку свойства классов становились?:
Можно ли это сделать через тот же onclick или нет?
- Вопрос задан более трёх лет назад
- 2955 просмотров
- Вконтакте
- Вконтакте
Можно как через click, так и через change
- Вконтакте
Вы не можете изменить уже описанный класс, так как он фиксирован в CSSOM. Именно класс, так как он может быть применён ко многим элементам.
Но вы можете описать дополнительные классы, в которых значения нужных вам свойств будут иметь нужные вам значения и добавлять их к нужным элементам в нужный момент, например, при нажатии. addEventListener, classList
Но при этом вам нужно следить за весом селектора, чтобы нужное вам правило применилось в правильном порядке и перезаписало нужные вам свойства. Selector, selector specificity.