How can I modify a CSS class using JavaScript?

Question

I know how to apply css on a single tag (or changing class on it) but THIS IS NOT WHAT I AM ASKING!

I would like to modify an attribute within a CSS class without touching the element where the class is applied.

In other words if this is the css

.myclass {
  font-size: 14px;
  color: #aab5f0;
}

and this is the html

<span id="test" class="myclass"> foo bar </span>

to increase the font of the span tag I want to modify the content of the class and NOT doing something like

var fontsize = parseInt($('#test').css('font-size').replace(/[^-\d\.]/g, ''));
fontsize += 10;
$('#test').css('font-size', fontsize+'px');

I want that the class becomes

.myclass {
      font-size: 18px;
      color: #aab5f0;
    } 

Is there a way to change the actual class through Javascript?

My other solution would be to put the css in a container and refill the container each time, but I have the sensation that it is not a good idea...

Answer 1

I think ideally you should define a base font size on the html or body element. All of the other font sizes in your CSS should be relative to that "master" font size, like so:

Then, when you adjust the font-size of the body through jQuery.css(), the other elements will all automatically adjust their size relative to the parent.

$(body).css('font-size', '14px');

You don't have to use the body level, you could define base font-size a div or other container and use that as the parent instead.

Here is a contrived example of this in action:

$('#grow').click(function() {
  $('body').css('font-size', '18px');
});

body {
  font-size: 12px;
}

h3,
p {
  font-size: 1.0em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h3>Main Title</h3>
<p> Welcome to my website. </p>

<button id="grow" type="button">Grow</button>

Answer 2

My comment notwithstanding, look at this question: Setting CSS pseudo-class rules from JavaScript

Changing a class and "setting pseudo-class rules" are achieved in the same way.

@Box9's answer is probably the one you should actually use:

I threw together a small library for this since I do think there are valid use cases for manipulating stylesheets in JS.

Answer 3

looking for same thing.

This was my solution

https://jsfiddle.net/sleekinteractive/0qgrz44x/2/

HTML

<p>The Ants in France stay mainly on the Plants</p>

CSS

p{
font-family:helvetica;
font-size:15px;
}

JAVASCRIPT (uses jQuery)

function overwrite_css(selector,properties){ 

// selector: String CSS Selector
// properties: Array of objects

var new_css = selector + '{';

for(i=0;i<properties.length;i++){

new_css += properties[i].prop + ':' + properties[i].value + ';';

}

new_css += '}';

$('body').append('<style>' + new_css + '</style>');

}

overwrite_css('p',Array({prop: 'font-size', value: '22px'}));
overwrite_css('p',Array({prop: 'font-size', value: '11px'}));
overwrite_css('p',Array({prop: 'font-size', value: '66px'}));

// ends on 66px after running all 3. comment out lines to see changes

Answer 4

There is no need to change the class itself. To override the behaviour, simply add another class to the existing one or change it entirely. I'll show the first option:

.myclass {
    font-size: 14px;
    color: #aab5f0;
}
.myclass.override {
    font-size: 12px;
}

And then all you need to do from javascript is to toggle the override class. This way it's also much better as all the presentation is done in CSS.

Answer 5

Since it's obvious you're using jQuery, please see the addClass and removeClass functions.

$('#test').removeClass('myClass').addClass('yourClass');

Answer 6

Simply JQuery:

$('#test').attr('class','bigFont'); 

or native JS :

document.getElementById('test').className ='bigFont';

UPDATED

var size = [ 10 , 20 , 30 ] ;
var i =0;
$('#test').css('font-size',size[i]+'px');
i = (i+1)%size.length ;