jquery - click a button to change text font-size of <body> in javascript/css -
to clear picture of doing check example or check following code
this example change text size of h1, h2, p.
is there way in javascript/css can change text size of "body" can change 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 { 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>
maybe more convenient use css , additional classes on body change base font-size? related these classes 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 you.
Comments
Post a Comment