.setProperty()

Метод 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')
})

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать