Search code examples
cssstylesfont-sizehead

How do you change the font-size of a custom css style?

How do you change the font-size of a custom css style using javascript?

I've seen examples of how to replace inline styles using javascript but I can't find how to replace an attribute like font-size in a non-inline custom style in a header. For example I'd like to use javascript to change the font-size from 12px 20px using javascript.

<head>
<style>
.mystyle{
font-size:12px;
}
</style>

Solution

  • Here is the code:

    html:

    <p class="mystyle">This is some text.</p>

    javascript:

    window.onload=function(){
document.getElementsByClassName("mystyle")[0].style.fontSize="120%";
}

    You can also set the fontsize as smaller , larger, in length units and also inherit font-size of parent element.