Как через js поменять состояние элемента css

Стили и классы

До того, как начнёте изучать способы работы со стилями и классами в JavaScript, есть одно важное правило. Надеемся, это достаточно очевидно, но мы всё равно должны об этом упомянуть.

Как правило, существует два способа задания стилей для элемента:

1. Создать класс в CSS и использовать его:
2. Писать стили непосредственно в атрибуте style : .

JavaScript может менять и классы, и свойство style .

Классы – всегда предпочтительный вариант по сравнению со style . Мы должны манипулировать свойством style только в том случае, если классы «не могут справиться».

Например, использование style является приемлемым, если мы вычисляем координаты элемента динамически и хотим установить их из JavaScript:

let top = /* сложные расчёты */; let left = /* сложные расчёты */; elem.style.left = left; // например, '123px', значение вычисляется во время работы скрипта elem.style.top = top; // например, '456px'

Мы также можем установить сразу несколько стилей для элемента, используя свойство cssText . Но с ним нужно быть осторожнее, т.к оно может как добавить стили к существующим, так и полностью перезаписать их на новые:

let top = /* сложные расчёты */; let left = /* сложные расчёты */; // полная перезапись стилей elem, используем = elem.style.cssText = ` top: $; left: $; `; // добавление новых стилей к существующим стилям elem, используем += elem.style.cssText += ` top: $; left: $; `; // если элементу уже заданы стили, которые мы хотим добавить (+=), // они будут перезаписаны на новые.

В других случаях, например, чтобы сделать текст красным, добавить значок фона – описываем это в 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 :

Свойство style

Свойство elem.style – это объект, который соответствует тому, что написано в атрибуте «style» .

Свойства из одного слова записываются так же, с маленькой буквы:

background => elem.style.background top => elem.style.top opacity => elem.style.opacity

Для свойств из нескольких слов используется camelCase:

background-color => elem.style.backgroundColor z-index => elem.style.zIndex border-left-width => elem.style.borderLeftWidth

document.body.style.backgroundColor = prompt('background color?', 'green');

Свойства с префиксом

Стили с браузерным префиксом, например, -moz-border-radius , -webkit-border-radius преобразуются по тому же принципу: дефис означает заглавную букву.

button.style.MozBorderRadius = '5px'; button.style.WebkitBorderRadius = '5px';

Сброс стилей

Иногда нам нужно добавить свойство стиля, а потом, позже, убрать его.

Например, чтобы скрыть элемент, мы можем задать elem.style.display = «none» .

Затем мы можем удалить свойство style.display , чтобы вернуться к первоначальному состоянию. Вместо delete elem.style.display мы должны присвоить ему пустую строку: elem.style.display = «» .

// если мы запустим этот код, "мигнёт" document.body.style.display = "none"; // скрыть setTimeout(() => document.body.style.display = "", 1000); // возврат к нормальному состоянию

Если мы установим в style.display пустую строку, то браузер применит CSS-классы и встроенные стили, как если бы такого свойства style.display вообще не было.

Следите за единицами измерения

Не забудьте добавить к значениям единицы измерения.

Например, мы должны устанавливать 10px , а не просто 10 в свойство elem.style.top . Иначе это не сработает:

Пожалуйста, обратите внимание, браузер «распаковывает» свойство style.margin в последних строках и выводит style.marginLeft и style.marginTop из него.

Вычисленные стили: getComputedStyle

Итак, изменить стиль очень просто. Но как его прочитать?

Например, мы хотим знать размер, отступы, цвет элемента. Как это сделать?

Свойство style оперирует только значением атрибута «style» , без учёта CSS-каскада.

Поэтому, используя elem.style , мы не можем прочитать ничего, что приходит из классов CSS.

Например, здесь style не может видеть отступы:

  body Красный текст  

…Но что, если нам нужно, скажем, увеличить отступ на 20px ? Для начала нужно его текущее значение получить.

Для этого есть метод: getComputedStyle .

getComputedStyle(element, [pseudo])

element Элемент, значения для которого нужно получить pseudo Указывается, если нужен стиль псевдоэлемента, например ::before . Пустая строка или отсутствие аргумента означают сам элемент.

Результат вызова – объект со стилями, похожий на elem.style , но с учётом всех CSS-классов.

  body   

Вычисленное (computed) и окончательное (resolved) значения

Есть две концепции в CSS:

1. Вычисленное (computed) значение – это то, которое получено после применения всех CSS-правил и CSS-наследования. Например, height:1em или font-size:125% .
2. Окончательное (resolved) значение – непосредственно применяемое к элементу. Значения 1em или 125% являются относительными. Браузер берёт вычисленное значение и делает все единицы измерения фиксированными и абсолютными, например, height:20px или font-size:16px . Для геометрических свойств разрешённые значения могут иметь плавающую точку, например, width:50.5px .

Давным-давно getComputedStyle был создан для получения вычисленных значений, но оказалось, что окончательные значения гораздо удобнее, и стандарт изменился.

Так что, в настоящее время getComputedStyle фактически возвращает окончательное значение свойства, для геометрии оно обычно в пикселях.

getComputedStyle требует полное свойство!

Для правильного получения значения нужно указать точное свойство. Например: paddingLeft , marginTop , borderTopWidth . При обращении к сокращённому: padding , margin , border – правильный результат не гарантируется.

Например, если есть свойства paddingLeft/paddingTop , то что мы получим вызывая getComputedStyle(elem).padding ? Ничего, или, может быть, «сгенерированное» значение из известных внутренних отступов? Стандарта для этого нет.

Стили, применяемые к посещённым :visited ссылкам, скрываются!

Посещённые ссылки могут быть окрашены с помощью псевдокласса :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 . Только для чтения.

Задачи

Создать уведомление

важность: 5

Напишите функцию showNotification(options) , которая создаёт уведомление: с заданным содержимым. Уведомление должно автоматически исчезнуть через 1,5 секунды.

Пример объекта options :

// показывает элемент с текстом "Hello" рядом с правой верхней частью окна. showNotification(< top: 10, // 10px от верхней границы окна (по умолчанию 0px) right: 10, // 10px от правого края окна (по умолчанию 0px) html: "Hello!", // HTML-уведомление className: "welcome" // дополнительный класс для div (необязательно) >);

Используйте CSS-позиционирование для отображения элемента в заданных координатах. Исходный документ имеет необходимые стили.

CSS. Динамическое изменение класса

Это вообще возможно сделать, и какими способами? P.S. Нужно изменить именно сам класс css, добавлять новый класс не нужно, также как и не нужно обращаться к свойству style у элемента в js, такие решения не подходят.

Отслеживать
задан 11 дек 2017 в 17:25
665 1 1 золотой знак 10 10 серебряных знаков 20 20 бронзовых знаков

Используйте события элемента с javascript , удобно c Jquery менять состояние стиля. надо поискать (google). safaribooksonline.com/library/view/javascript-cookbook/…

11 дек 2017 в 17:31

чтобы получить помощь нужно показать, как вы сами пытались это сделать. давайте ваш код, будем разбираться.

11 дек 2017 в 17:33
Это можно сделать и средствами css и js,которые Вы указали метками в вопросе.
11 дек 2017 в 17:37

На многих сайтах есть такие панельки joxi.ru/n2YdjZMcjQPzLm, когда пользователь может сам изменять цвета содержимого. Допустим, есть некий элемент , сейчас текст в нем синего цвета, при изменении цвета в этой панели, у этого элемента остается все то же самое, тот же класс, атрибута style нет, но при этом цвет текста изменяется в самом классе active, т.е. изменился сам класс active, записанный в стилях до загрузки страницы.

Изменение css через js onclick

Здравствуйте, при таком использовании, действие происходит по правилам тоглера, т.е. раз в 2 нажатия. Вопрос с том, как сделать так, чтобы смена css у элемента, происходила на onclick, т.е. при каждом нажатии?

Отслеживать
задан 27 апр 2019 в 13:00
user310701 user310701
если при первом нажатии добавляется класс animated, то что должно произойти при втором?
27 апр 2019 в 13:18

@StrangerintheQ, соответственно он должен исчезать) Если не сложно, можно пример с сразу 2мя или более классами, за одну строку. (Пример: element.classList.toggle(‘animated’, ‘animated2’, ‘animated3’);)

– user310701
27 апр 2019 в 13:27
исчезать один и появлятся второй, затем третий, четвертый итд и так по кругу?
27 апр 2019 в 13:31

@StrangerintheQ, у меня при нажатии на кнопку(img) происходит анимация самой кнопки, включение музыки, и появление через ‘transform: translateY’ анимации на css. Все работает как и необходимо, музыка, и появление анимации css включается и выключается по нажатию, но мне необходима чтобы анимация самой кнопки(img) происходила при каждом нажатии, а не раз за 2 нажатия. (skylikeit.xyz/code/code.txt)

Как поменять положение элементов при применении скрипта JS?

Как это выглядит без скрипта (и как задумывалось):
элементы расположены вертикально, кнопка, вызывающая их не мешает

Как выглядит после применения скрипта:
элементы вдруг становятся inline (видно в панеле в браузере)

После долгих попыток исправить ситуацию, сдаюсь и обращаюсь за помощью!
Что нужно исправить или дописать в скрипте, чтобы элементы выстраивались вертикально, и не превращались в inline?
Заранее благодарю за помощь!

• Вопрос задан 27 февр.
• 104 просмотра

Комментировать
Решения вопроса 1

Для правильного вопроса надо знать половину ответа

Поскольку у вас изначально установлено display: none , то toggle просто убирает свойство display и оно становится дефолтным для a , то есть inline .
Варианты:
— поместить все иконки в общий div и переключать его;
— переключать класс, на основе которого в CSS менять свойство display .

Из ошибок с ходу:
— тэг i не стоит использовать для иконок, семантически он предназначен для выделения фрагмента текста, например технического термина или идиоматическтого выражения;
— ‘display’ в первом параметре toggle не имеет смысла, там может быть длительность переключения, объект с параметрами или логическое значение, но не произвольная строка.

Ответ написан 27 февр.
Нравится 1 4 комментария

Анна @Anna_Polyakovich Автор вопроса

Спасибо большое!
Удалось исправить проблему доступными средствами)) У меня вышло не идеально, конечно, — но все-таки вертикального положения удалось добиться) Единственное, что хотелось бы подкорректировать — это «прыгающее» появление значков — наверное, что из-за toggle. Но addClass вместо toggle не работает.
Вот эта конструкция переключает значки, но появляется при этом сначала сжимаясь, а потом увеличиваясь и приходит в нормально положение.
Может быть, есть какие-то стандартные решения появления класса active ?)

$('.icon-bar').click(function() < $('.icon-bar>a').toggle('.active'); >);

Ankhena @Ankhena Куратор тега JavaScript

Дополню, что он не просто убирает display, а конкретно его дописывает через атрибут style. На тот, который был до none, т.е. в данном случае на inline.

Как воспринимается .toggle( display ) написано прям тут https://api.jquery.com/toggle/

За переключение классов очень много раз плюсую.