change text-font size of whole page content

Question

is there a way in javascript/css that i can change text size of all the labels, headings, paragraphs etc on a single click and without explicitly getting element's id and then changing its font size.

what i am doing right now is that i get element's id through javascript and change its font size explicitly. To get a clear picture of what i am doing check this link or check the following code

<script type="text/javascript">
function changemysize(myvalue) {
    var div = document.getElementById("mymain");
    div.style.fontSize = myvalue + "px";   
}
</script>

HTML code

Choose a text size:
<font size="2"><a href="javascript:void(0);" onclick="changemysize(16);">A</a></font>
<font size="4"><a href="javascript:void(0);" onclick="changemysize(20);">A</a></font>
<font size="5"><a href="javascript:void(0);" onclick="changemysize(25);">A</a></font>
<div id="mymain">
Only this text gets affected
</div>

score 5 · Answer 1 · answered May 09 '13 at 12:00

5

You can use rem, which is better than em in some places because em cascades and rem does not.

With all lengths are specified in rem, you can adjust the sizes by change the font-size of the <html> element.

See also: http://snook.ca/archives/html_and_css/font-size-with-rem

answered May 09 '13 at 12:00

Lu Wang

356
1
4

Very handy tip! Shame it requires IE9 plus, because `ems` can be both a blessing and a curse. I'll probably use `rem` from now on if I don't care about older IEs. – Christian May 09 '13 at 12:06

Ivo Tebexreni · Answer 2 · 2021-09-13T21:52:25.397

You can change the font of a element and its children recursively to "force" it all to change:

function changeFont(element){
    element.setAttribute("style",element.getAttribute("style")+";font-family: Courier New");
    for(var i=0; i < element.children.length; i++){
        changeFont(element.children[i]);
    }
}
changeFont(document.getElementsByTagName("body")[0]);

Alternatively you can use the style atribute of the element as object:

function changeFont(element){
    element.style.fontFamily="Courier New";
    for(var i=0; i < element.children.length; i++){
        changeFont(element.children[i]);
    }
}
changeFont(document.getElementsByTagName("body")[0]);

score 1 · Accepted Answer · answered May 09 '13 at 11:45

1

Add an id to the body tag and then go ahead and change it's font size with JavaScript. This will change the font size for every element inside your webpage! It is as simple as that!

answered May 09 '13 at 11:45

akash4eva

815
1
6
11

2

or just simply style the body – Patsy Issa May 09 '13 at 11:49
7

No need to ID the body, just use `document.body`. – Bram Vanroy May 09 '13 at 11:50

Christian · Answer 4 · 2013-05-09T12:08:36.573

1

I'd recommend using ems as a measure for setting font sizes. That way, with 1 tag, you can adjust the font sizes of every element relatively, instead of specifying specific sizes. Example:

body {
  font-size: 1em;
}

h1 {
  font-size: 1.5em;
}

h2 {
  font-size: 1.3em;
}

p.large {
  font-size: 1.2em;
}

Then you could apply a class to the body, like so

body.enlarged {
  font-size: 1.3em;
}

Which would scale the font size of all elements respectively. The javascript code would go something like this:

document.body.classList.add('enlarged');

Demo here: http://jsfiddle.net/bW9fM/1/

edited May 09 '13 at 12:08

answered May 09 '13 at 11:52

Christian

19,605
3
54
70

Why mix regular js with jquery? – Bram Vanroy May 09 '13 at 11:57
@BramVanroy jQuery is used for the demo to bind the handler; it is not part of the question (he's bound his own handler, albiet in a poor way) the question was not tagged with jQuery therefore I didn't use jQuery's `.addClass()`. Using a library doesn't mean you can't use raw JS. If it makes your life better, here's a [pure js version](http://jsfiddle.net/bW9fM/1/), and a [jQuery version](http://jsfiddle.net/bW9fM/2/). – Christian May 09 '13 at 12:01

score 0 · Answer 5 · answered May 06 '20 at 15:53

An alternative approach based on this answer

// iterate over the children of an element, and the element itself
// and excute a callback function, passing in the elements
function mapElement(element, callback){
    callback(element);    
    for(var i=0; i < element.children.length; i++){
        callback(element.children[i]);
    }
}

mapElement(
    document.querySelector('body'), 
    (e) => { 
        e.style.fontFamily = 'Arial';
        e.style.fontSize = '12pt'; 
    }
);

change text-font size of whole page content

5 Answers5

Linked