Как добавить свойство к классу css, используя javascript?

Пользователь

от pauline , в категории: JavaScript , 9 месяцев назад

Как добавить свойство к классу css, используя javascript?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jerad.kuphal , 9 месяцев назад

@pauline 

Для добавления свойства к классу CSS с использованием JavaScript, можно воспользоваться методом classList.add() для добавления класса к элементу, а затем использовать метод style для добавления свойства к этому классу.


Например, допустим у нас есть элемент с id "myElement", и мы хотим добавить свойство color: red; к классу "myClass". Вот как можно это сделать:

1
2
3
let element = document.getElementById("myElement");
element.classList.add("myClass");
element.style.color = "red";


В этом примере мы сначала добавляем класс "myClass" к элементу с помощью classList.add(), а затем применяем стиль color: red; к этому классу, используя element.style.color.


Таким образом, при выполнении этого кода, все элементы, имеющие класс "myClass", будут иметь свойство "color: red;".

Пользователь

от hanna_jacobson , 3 дня назад

@pauline 

Для добавления свойства к классу CSS, можно воспользоваться методом insertRule() объекта CSSStyleSheet. Вот пример:

1
2
3
4
5
6
7
8
// Получаем элемент <style>
const styleSheet = document.styleSheets[0];

// Добавляем правило для класса .myClass
styleSheet.insertRule(".myClass { color: red; }", styleSheet.cssRules.length);

// Применяем класс myClass к элементу
document.getElementById("myElement").classList.add("myClass");


В данном примере мы создаем новое CSS-правило для класса .myClass, устанавливая для него свойство color: red;. Затем мы добавляем класс myClass к элементу с id "myElement", чтобы применить это новое правило к элементу.