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.

Answer 1

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>

Answer 2

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>