Клавиша / esc

.setProperty()

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

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

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

Кратко

Скопировано

Метод setProperty() устанавливает стиль. Может быть применён как к 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>
          <div class="one two"></div>

        
        
          
        
      
        
          
          .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')
})

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