Add CSS property to a class by JavaScript [duplicate]

Question

How do I add new CSS property to an existing class?

For example, if I got a class name .test and already have some styling/properties.

And I'd like to add a new property color: blue; to this class name by JavaScript.

How to do this?

const elm  = document.querySelector('.test');

.test {
  width: 200px;
  height: 50px;
  background-color: orange;
}

<div class="test">Testing...123</div>

Also see modify a css rule object with javascript; MDN CSSStyleSheet.cssRules — showdev
– showdev, Commented Apr 13, 2022 at 3:23

Hao Wu · Accepted Answer · 2022-04-13 03:28:59Z

0

You can search all css rules and find the one with selector of .test, then add any property to the rule.

let target;

outer: for(let sheet of document.styleSheets) {
  for(let rule of sheet.rules) {
    if(rule.selectorText === '.test') {
      target = rule;
      break outer;
    }
  }
}

if(target) {
  target.style.color = 'blue';
}

.test {
  width: 200px;
  height: 50px;
  background-color: orange;
}

<div class="test">Testing...123</div>
<div class="test">Testing...456</div>

answered Apr 13, 2022 at 3:28

Hao Wu

21.6k7 gold badges37 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Add CSS property to a class by JavaScript [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related