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 bees

.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 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 bees

.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...

• javascript
• jquery
• html
• css

• If it really is just for one element, then stick with exactly what you have. In fact, I'm not sure why you'd ever want to "change the class". Though, it is possible. – thirtydot Commented Oct 5, 2011 at 20:11
• 1 No, it's not for only one element, it is for 100 different span tags that are created dynamically by a function and placed in the page with absolute positioning to create a "cloud". The problem is that I cannot touch the span (I mean, it is useless) because I need to re-run the function to create and place again the new bigger words in the page to be sure that the words will not overlap. – Giovanni Di Milia Commented Oct 5, 2011 at 20:19
• A little niceness goes a long way... Because so many ppl aren't understanding the question (myself included) maybe your wording of the question needs more work and less bolding – Mike Fielden Commented Oct 5, 2011 at 20:38
• 1 I changed the question when I understood that it was not clear, but if I say "without touching the span tag" and everybody answer "apply a new style to the span tag", sorry but I don't know how to be more clear! – Giovanni Di Milia Commented Oct 5, 2011 at 20:45
• I'm thinking you need to take a long, hard look at the problem, and figure out whether this is actually what you want. – Ryan Kinal Commented Oct 5, 2011 at 21:07

6 Answers 6

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

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

My ment 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/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. ment 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 ;