Change css property for a known class via javascript

Question

So the case is like this...
I have an HTML element with a specific css class. I would like to change the value of the property of that specific class without any change to the HTML element itself.

HTML code:

<style>
  .someClass{
      background-color:red;
  }

  span .someOtherClass {
  background-color:blue;
  }
</style>

<span class="someClass someOtherClass">some text</span>

I'm looking for a JS code that will make it so that the ".someClass" identifier will have "background-color:green";

The reason I would like to change the class itself and not just using .css option is that .css changes the style property of the HTML element (inline). The use case is where the second class (someOtherClass) is added and removed dynamically to and from the span element. Using the .css for changing the element with ".someClass" class will change the inline style of the element reasulting with:

<span class="someClass someOtherClass" style="background-color:green;">some text</span>

and this means that adding and removing "someOtherClass" from the span element will not have any affect.

I did think about removing someClass from the span element and replacing it with some new dynamically created class with "background-color:green" but I was wondering if there is something more elegant.

Any assistance will be appreciated.

I don't really understand the problem. Using css (from style block or file, not via attribute) does not change the inline style. Setting a style directly with javascript, on the other hand, would. — Scott Weaver
– Scott Weaver, Commented Jan 15, 2017 at 18:14
You can override a style set inline using a class, and here is how: jsfiddle.net/qsy3f3v0 — Asons
– Asons, Commented Jan 15, 2017 at 19:24

Michael Coker · Accepted Answer · 2017-01-15 18:12:40Z

3

You can simply add a new class representing the green color, and add a CSS rule for that. Then you can remove the original .someClass or not, depending on how you plan on using it. As long as you overwrite the color attribute of the original class hierarchically or with higher specificity, the new class will have precedence over the original class whether you remove it or not.

var someClass = document.getElementsByClassName('someClass')[0];
someClass.classList.add('green');
someClass.classList.remove('someClass'); // optional

.someClass {
  color: red;
}
.green {
  color: green;
}

<span class="someClass">someclass</span>

answered Jan 15, 2017 at 18:12

Michael Coker

53.8k5 gold badges69 silver badges66 bronze badges

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

Comments

Rounin · Accepted Answer · 2017-01-15 20:13:17Z

In javascript, you can use insertRule() to add rules to the end of the stylesheet (or indeed anywhere in the stylesheet).

This will enable you to change one or several or all of the declarations associated with a specific class - in this case, rewriting the declaration of .someClass from

background-color: red

to

background-color: green.

Working Example:

var span = document.getElementsByTagName('span')[0];
var toggleSomeOtherClass = document.getElementsByClassName('toggle-some-other-class')[0];
var changeSomeClass = document.getElementsByClassName('change-some-class')[0];
var backgroundColor = 'red';

function toggleClass() {
	span.classList.toggle('someOtherClass');
}

function changeClass() {
	backgroundColor = (backgroundColor === 'red' ? 'green' : 'red');
	document.styleSheets[0].insertRule('.someClass {background-color: ' + backgroundColor + ';}', document.styleSheets[0].cssRules.length);
	document.styleSheets[0].insertRule('.someOtherClass {background-color: blue;}', document.styleSheets[0].cssRules.length);
}

toggleSomeOtherClass.addEventListener('click', toggleClass, false);
changeSomeClass.addEventListener('click', changeClass, false);

span {
display: inline-block;
width: 120px;
height: 60px;
line-height: 60px;
color: rgb(255,255,255);
font-weight: bold;
text-align: center;
}

.someClass {
background-color: red;
}

.someOtherClass {
background-color: blue;
}

<span class="someClass someOtherClass">some text</span>

<button class="toggle-some-other-class" type="button">Toggle someOtherClass</button>
<button class="change-some-class" type="button">Change someClass</button>

Collectives™ on Stack Overflow

Change css property for a known class via javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related