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


Tags: css,styles,font-size,head

Problem :

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.


    CSS Howto..

    Border-bottom not showing correctly

    How to fit CSS buttons into table cells?

    How to make xsl show only images/captions from xml

    How to edit the CSS of a td element through the hierarchy?

    Border around tr element doesn't show?

    How to use the CSS :not selector for classes further up the DOM tree

    Show Limited Data Using jquery

    Fade in/out text slideshow

    How to make a toggleable navbar in pure CSS?

    How can I set a floats width to the left over space?

    How to use javascript/css to navigate through a pure css carousel/slideshow?

    CSS: How to fix the width of a vertical menu?

    How to position text in a navigation “div.”

    How to create a CSS only (vertical) drop-down menu?

    How to select an html element that has two class names?

    CSS how to change color of a specific primary-panel in a if-block

    In html how do I have table within table look visually the same as if I didnt have the inner table

    How to position div inside middle of navbar?

    How to define the css :hover state in a jQuery selector?

    How to align social like buttons next to copyright text inside footer?

    How to make a simple contact form input box responsive

    How to center image using CSS without white border

    How do you have a hidden div appear and change sizes using css or jquery?

    How do I override Bootstrap's
    border-left with a FontAwesome icon in CSS?

    How to use center-block and vertical align together using Bootstrap?

    How to make text responsive to div size?

    How to trigger CSS-Filter animation on Click (or Scrolling)

    How to make image stretch to a specific paragraph?

    How can I see “:hover” and “:active” properties of elements on a webpage? [duplicate]

    How to style td with input button and text-size button?