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 t

Answer 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/