.setProperty()

The setProperty() method sets a style. It can be applied to both a DOM element and a specific CSS rule.

In the first case, specificity will be with the style attribute, since styles will be written inline. In the second case, specificity will not change.

The setProperty() method can take three parameters.

propertyName. A mandatory string with the name of the CSS property. It must match the name of the property, for example, max-width.

value. A string with the new value of the property. If the parameter is not specified, an empty string will be passed.

priority. This parameter can be used to set the highest priority for the new value !important. To do this, pass the string "important".

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Let's consider a case where the method is applied to a specific CSS rule. We have an HTML element with the following classes:

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

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          .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;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Let's change the CSS rule for class .two.

        
          
          // <div>, the color of which we will changeconst sq = document.querySelector('div')// The stylesheet where we will look for the necessary ruleconst stylesheet = document.styleSheets[1]// Finding the necessary ruleconst newRule = [...stylesheet.cssRules].find(  (r) => r.selectorText === ".two")// When hovering, the <div> turns the new colorsq.addEventListener('mouseover', () => {  newRule.style.setProperty('background', 'tomato')})// When the cursor leaves the element,// the <div> turns back to greysq.addEventListener('mouseout', () => {  newRule.style.setProperty('background', 'grey')})
          // <div>, the color of which we will change
const sq = document.querySelector('div')

// The stylesheet where we will look for the necessary rule
const stylesheet = document.styleSheets[1]

// Finding the necessary rule
const newRule = [...stylesheet.cssRules].find(
  (r) => r.selectorText === ".two"
)

// When hovering, the <div> turns the new color
sq.addEventListener('mouseover', () => {
  newRule.style.setProperty('background', 'tomato')
})

// When the cursor leaves the element,
// the <div> turns back to grey
sq.addEventListener('mouseout', () => {
  newRule.style.setProperty('background', 'grey')
})

        
        
          
            
            Copy
            Copied
            Failed to copy