Lo Siu Fung Lo Siu Fung - 6 months ago 47
Javascript Question

click a button to change text font-size of <body> in javascript/css

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.com/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>




Answer

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.net/shurshilin/94cnutdr/

Hop, it'll help you.

Comments