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>