How can I modify a CSS class using JavaScript?

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;开发者_JAVA技巧
$('#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...

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>

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.

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.

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

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

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

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 ;