How to increase and reset the font size of html using javascript?
Question
I used following code to increase and reset font size of the HTML.But unable to Increase the font size.I want to increase the font size of the whole body part of HTML page.Following Code i used to increase the font size of the Page.
<script type="text/javascript">
$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
//console.log(originalFontSize);
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
});
</script>
In HTML page i used following
<a href="#" class="resetFont">RESET Font</a>
<a href="#" class="increaseFont">INCREASE FONT</a>
Please Help me...
Thanks all in advance
3 answers
solution1
0 2012-07-16 06:15:17
Your code is working fine for me, but if it still isn't working, try this: http://jsfiddle.net/XZfKh/ .
var originalFontSize;
$(document).ready(function(){
// Reset Font Size
originalFontSize = $('html').css('font-size');
//console.log(originalFontSize);
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
});
I moved the declaration for originalFontSize to the top.
EDIT:
If some elements have a font-size already specified, use this code:
var newFontSize = 100;
$(document).ready(function(){
$(".resetFont").click(function(){
newFontSize = 100;
var allElems = $('*');
for(var counter = 0; counter < allElems.length; counter++) {
$(allElems[counter]).css('font-size', '100%');
}
});
// Increase Font Size
$(".increaseFont").click(function(){
newFontSize = newFontSize*1.2;
var allElems = $('*');
for(var counter = 0; counter < allElems.length; counter++) {
$(allElems[counter]).css('font-size', newFontSize + '%');
}
return false;
});
});
It cycles through all of the elements on the page, and increases the font-size for each of them.
solution2
0 2012-07-16 07:00:55
You are setting font-size only to <html> . I guess the issue is, actual text which needs font-size increase, is applied with inline styles or css class which have font-size definition in pixel . So that its size is not getting increased. Try setting font-size to actual html element of text or set font-size in em for all element in your document exclude "<html>" .
Then you can use your javascript to get it work.
solution3
-2 2012-07-16 05:44:34
I think this depends on your CSS. If you have defined elements below the HTML element (like body, divs, etc) to have absolute font sizes (eg px values) this will not work. If you use relative sizes (eg em's) this script looks like it should work.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.