javascript - Easy way to change the FontSize of the whole html document -
is there standard approach changing font size of whole html document?
i'm thinking of 2 buttons, 1 increases font size , decreases font size. both of these buttons calls javascript function;
function increasefontsize(){ //increase font size whole document } function decreasefontsize(){ //decrease font size whole document }
question
how do this? there more simple way 1 stated above?
edit
i'm using bootstrap, comes it's own css each html element. bootstrap defines default (body) font size 14px.
one way if use em
units on css , can use jquery
solution can works.
you can set global value on body change that:
$(document).ready(function(){ var fontsize = parseint($('body').css('font-size'),10); $('.inc').on('click',function(){ fontsize+=0.5; $('body').css('font-size',fontsize+'px'); }) $('.dec').on('click',function(){ fontsize-=0.5; $('body').css('font-size',fontsize+'px'); }) })
body { font-size:12px; padding-top:20px; } .tit { font-size:3em; } .sub { font-size:2em; } .cont { font-size:1em; } .button { position:absolute; top:0; font-size:15px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="tit">main title</div> <div class="sub">subtitle</div> <div class="cont">contents</div> <div class="button"> <a class="inc" href="#">increase</a> <a class="dec" href="#">decrease</a> </div>
Comments
Post a Comment