.setProperty()

Как задать CSS свойство используя setProperty()

Время чтения: меньше 5 мин

Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.

Кратко

Скопировано

Метод setProperty() позволяет установить стиль при помощи JavaScript. Может быть применён как к DOM-элементу, так и конкретному CSS правилу.

В первом случае специфичность будет как и у атрибута style, т.к. стили будут записаны инлайн. Во втором случае специфичность не изменится.

Как пишется

Скопировано

Метод setProperty() может принимать три параметра:

propertyName. Обязательная строка с названием CSS-свойства. Должна совпадать с названием свойства, например max-width.

value. Строка с новым значением свойства. Если параметр не указан, то будет передана пустая строка.

priority. При помощи этого параметра можно установить новому значению самый высокий приоритет !important. Для этого передайте сюда строку "important"

        
          
          setProperty(propertyName, value, priority);
          setProperty(propertyName, value, priority);

Пример

Скопировано

Рассмотрим случай, когда метод применяется к конкретному CSS правилу.
У нас есть HTML-элемент со следующими классами:

        
          
          <div class="one two" />
          <div class="one two" />

        
          
          .one {  background: blue;  width: 100px;  height: 100px;  transition: background .2s ease-in;  cursor: pointer;}.two {  background: grey;}
          .one {
  background: blue;
  width: 100px;
  height: 100px;
  transition: background .2s ease-in;
  cursor: pointer;
}

.two {
  background: grey;
}

Давайте изменим CSS правило для класса .two

        
          
              // div цвет которого будем менять    const sq = document.querySelector('div');    // таблица стилей, где будем искать нужно нам правило    const stylesheet = document.styleSheets[1];    // находим нужное правило    const newRule = [...stylesheet.cssRules].find((r) => r.selectorText === ".two");    // при наведении div будет окрашиваться в новый цвет    sq.addEventListener('mouseover', () => {      newRule.style.setProperty('background', 'tomato');    });    // когда курсор уходит с элемента, окрашиваем div обратно в серый    sq.addEventListener('mouseout', () => {      newRule.style.setProperty('background', 'grey');    });
              // div цвет которого будем менять
    const sq = document.querySelector('div');

    // таблица стилей, где будем искать нужно нам правило
    const stylesheet = document.styleSheets[1];

    // находим нужное правило
    const newRule = [...stylesheet.cssRules].find((r) => r.selectorText === ".two");

    // при наведении div будет окрашиваться в новый цвет
    sq.addEventListener('mouseover', () => {
      newRule.style.setProperty('background', 'tomato');
    });

    // когда курсор уходит с элемента, окрашиваем div обратно в серый
    sq.addEventListener('mouseout', () => {
      newRule.style.setProperty('background', 'grey');
    });

Открыть демо в новой вкладке