To get a clear picture of what i am doing check this example or check the following code
This example is to change text size of h1, h2, p.
Is there a way in javascript/css that I can change text size of "body" that I can change the whole page text?
$(document).ready(function() {
$("#small").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "24px"
});
$("h2").animate({
"font-size": "16px"
});
$("p").animate({
"font-size": "12px",
"line-height": "16px"
});
});
$("#medium").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "36px"
});
$("h2").animate({
"font-size": "24px"
});
$("p").animate({
"font-size": "16px",
"line-height": "20px"
});
});
$("#large").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "48px"
});
$("h2").animate({
"font-size": "30px"
});
$("p").animate({
"font-size": "20px",
"line-height": "20px"
});
});
$("a").click(function() {
$("a").removeClass("selected");
$(this).addClass("selected");
});
});* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
body {
background: #e7e7e7;
}
#wrapper {
width: 400px;
margin: 0 auto;
padding: 40px;
background: #fff;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, .25);
}
#controls {
float: right;
padding: 2px;
width: 25px;
background: #333;
position: fixed;
margin: 0 0 0 440px;
text-align: center;
transition: .25s ease-out;
}
#controls a {
font-size: 24px;
color: #aaa;
display: block;
font-weight: bold;
padding: 5px;
}
#controls a:hover {
color: #fff;
background: #000;
transition: .25s ease-out;
}
a.selected {
background-color: #294C52;
color: #fff !important;
}
#small {
font-size: 10px !important;
}
#medium {
font-size: 16px !important;
}
#large {
font-size: 20px !important;
}
.small {
font-size: 75%;
}
h1 {
font-size: 36px;
font-weight: bold;
}
h2 {
font-size: 24px;
margin: 10px 0;
}
p {
font-size: 14px;
line-height: 20px;
}<script src='.1.3/jquery.min.js'></script>
<body>
<div id="wrapper">
<div id="controls">
<a href="#" id="small">A</a>
<a href="#" id="medium" class="selected">A</a>
<a href="#" id="large">A</a>
</div>
<h1>Header</h1>
<h2>Subheader</h2>
<p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
</div>
</body>To get a clear picture of what i am doing check this example or check the following code
This example is to change text size of h1, h2, p.
Is there a way in javascript/css that I can change text size of "body" that I can change the whole page text?
$(document).ready(function() {
$("#small").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "24px"
});
$("h2").animate({
"font-size": "16px"
});
$("p").animate({
"font-size": "12px",
"line-height": "16px"
});
});
$("#medium").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "36px"
});
$("h2").animate({
"font-size": "24px"
});
$("p").animate({
"font-size": "16px",
"line-height": "20px"
});
});
$("#large").click(function(event) {
event.preventDefault();
$("h1").animate({
"font-size": "48px"
});
$("h2").animate({
"font-size": "30px"
});
$("p").animate({
"font-size": "20px",
"line-height": "20px"
});
});
$("a").click(function() {
$("a").removeClass("selected");
$(this).addClass("selected");
});
});* {
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
body {
background: #e7e7e7;
}
#wrapper {
width: 400px;
margin: 0 auto;
padding: 40px;
background: #fff;
box-shadow: 0 0 50px 0 rgba(0, 0, 0, .25);
}
#controls {
float: right;
padding: 2px;
width: 25px;
background: #333;
position: fixed;
margin: 0 0 0 440px;
text-align: center;
transition: .25s ease-out;
}
#controls a {
font-size: 24px;
color: #aaa;
display: block;
font-weight: bold;
padding: 5px;
}
#controls a:hover {
color: #fff;
background: #000;
transition: .25s ease-out;
}
a.selected {
background-color: #294C52;
color: #fff !important;
}
#small {
font-size: 10px !important;
}
#medium {
font-size: 16px !important;
}
#large {
font-size: 20px !important;
}
.small {
font-size: 75%;
}
h1 {
font-size: 36px;
font-weight: bold;
}
h2 {
font-size: 24px;
margin: 10px 0;
}
p {
font-size: 14px;
line-height: 20px;
}<script src='http://cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<body>
<div id="wrapper">
<div id="controls">
<a href="#" id="small">A</a>
<a href="#" id="medium" class="selected">A</a>
<a href="#" id="large">A</a>
</div>
<h1>Header</h1>
<h2>Subheader</h2>
<p>Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id. Ius ad ubique animal, eum recteque electram explicari no, sed in nostrum adipiscing. Lorem ipsum dolor sit amet, pri ne periculis definiebas, habeo gloriatur has id.</p>
</div>
</body>4 Answers
Reset to default 5You can actually acplish this in a far simpler way than you may think.
By setting a starting font size on the body, you can set the font size of your other elements to use relative em units (1em = 1xbody font size in this case, so if the body font size is 14px, 1em = 14px). You can then use Javascript to increase / decrease the body font size, thereby impacting the relative font sizes of these elements.
Animation can be handled using a CSS transition alone.
$(document).ready(function() {
$('#increase, #decrease').on('click', function() { // click to increase or decrease
var btn = $(this),
fontSize = parseInt(window.getComputedStyle(document.body, null).fontSize, 0); // parse the body font size as a number
if (btn[0].id === "increase") { // detect the button being clicked
fontSize++; // increase the base font size
} else {
fontSize--; // or decrease
}
document.body.style.fontSize = fontSize + 'px'; // set the body font size to the new value
});
});body {
font-size: 14px;
}
h1,
h2 {
transition: font-size 200ms; /* animate font size changes */
}
h1 {
font-size: 2em; /* h1 element is 2x body font size */
}
h2 {
font-size: 1.5em; /* h1 element is 1.5x body font size */
}<script src='http://cdnjs.cloudflare./ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<button id="increase">increase +</button>
<button id="decrease">decrease -</button>
<h1>Header 1</h1>
<h2>Header 2</h2>If you use font-sizes with unit 'em' everywhere except for the body, you can change the body font-size and all others will also change.
JSFiddle
$(document).ready(function() {
$('.change-fs').click(function() {
$('.body').css('font-size', $(this).attr('data-size'));
});
});.body {
font: 400 10pt sans-serif;
}
h1 {
font-size: 2em;
}
h2 {
font-size:1.5em;
}
p {
font-size: 1em;
}<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="body">
<h1>A header, really big</h1>
<h2>A secondary header, still quite big</h2>
<p>Normal text, default font-size</p>
<div class="fs-ctrl">
<div data-size="10pt" class="change-fs">10pt</div>
<div data-size="12pt" class="change-fs">12pt</div>
<div data-size="16pt" class="change-fs">16pt</div>
<div data-size="20pt" class="change-fs">20pt</div>
</div>
</section>Maybe it will be more convenient to use CSS and additional classes on body to change base font-size? Related these classes you also can change sizes of other elements without JavaScript/JQuery coding.
HTML
<button class="js-font" data-size="big">Bigger</button>
<button class="js-font" data-size="normal">Normal</button>
<button class="js-font" data-size="small">Smaller</button>
CSS
body, body.normal {
font-size: 16px;
}
body.big {
font-size: 36px;
}
body.small {
font-size: 12px;
}
JQuery
$(function() {
$('.js-font').on('click', function() {
$('body')
.attr('class', '')
.addClass($(this).data('size'));
});
});
See fiddle http://jsfiddle/shurshilin/94cnutdr/
Hop, it'll help you.
I wrote a jQuery plugin to acplish this on more plex existing website designs. https://github./msigley/jQuery-Chaos-Fontsize-Selector