CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Giovanni Di Milia
Giovanni Di Milia

Reputation: 14041

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;
$('#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...

Upvotes: 5

Views: 15435

Answers (6)

Cᴏʀʏ
Cᴏʀʏ

Reputation: 107526

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>

Upvotes: 6

WebsterDevelopine
WebsterDevelopine

Reputation: 117

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

Upvotes: 0

shox
shox

Reputation: 1160

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 ;

Upvotes: -1

Ryan Kinal
Ryan Kinal

Reputation: 17732

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

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

Upvotes: 0

deviousdodo
deviousdodo

Reputation: 9172

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.

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

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.

Upvotes: 2

Related Questions