可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I want to increase font size in whole page when user click on increase button. It will be increase on bases of current font size. Following is sample code :
<div class='parent' style='font-size:15px'> <div class='c1'>div 1</div> <div class='c2'>div 2</div> <div class='c3'>div 3</div> <div class='c4'>div 4</div> <table style="font-size:17px"> <tr> <th>test 1</th> <th style='font-size:11px'><div>test 1.1</div><div style='font-size:22px'>test 1.2</div></th> <th>test 2</th> </tr> </table> </div>
Here is my jquery code but it will not work properly:
$(document).ready(function(){ $('.parent').find('*').each(function(){ curSize=$(this).css('font-size'); arrCurSize=curSize.toUpperCase().split("PX"); if(arrCurSize.length==2){ //alert(arrCurSize[0]); $(this).css('font-size',((parseInt(arrCurSize[0])+2)+"PX")); //alert($(this).css('font-size')); } }); })
回答1:
In addition to my previous comment, here is what I've made so far (again, assuming that you can't modify the HTML part) : http://jsfiddle.net/wared/JWUt9/. This solution is a bit dirty since it adds a style attribute and binds an extra font-size data to every element matched by the selector (in this case : p *). Furthermore, we have to loop through the entire set each time the user clicks the resize button. However, it allows to override fixed sizes defined from non inline styles.
If we had control over non inline styles, we could replace all fixed sizes from there by hand with em units for example, and we could do the same with inline fixed sizes via javascript. In the end, we could zoom in and out by simply modifying the container's font-size property, and descendant elements should resize automatically. Here is an interesting example from which we could start (scroll down a little to the first codepen demo) : http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/.
回答2:
It can be done in one shot.
Just define the inner elements' font-size referencing its container font-size.
E.g:
<div class="container"> <p class="par1">text1: 15px at start</p> <p class="par2">text2: 17px at start</p> </div> -------------------------------------------- .container {font-size: 10px} .par1 {font-size: 1.5em} .par2 {font-size: 1.7em}
The markup below, gives 15px to first paragraph and 17px to second. Because if the standard size setted in the container is 10px, then the conversion rates are:
- 1em = 10px // container initialization
- 1.5em = 15px
- 1.7em = 17px
- ... and so on ...
Now, you can update all font-size definitions, updating the container font-size.
Try this jsFiddle to play with this idea.
回答3:
Try this one
$(this).css("font-size","+=2");
回答4:
You can simply change font size of the body of whole page in a button click as below. here i changed the font-size in percentage.
$("#sizeUp").click(function() { $("body").css("font-size","70%"); });
If you want to change each element size with some amount in each button click, then follow below coding..
$('body *').each(function() { xsize= parseInt($(this).css('font-size')) + 1; $(this).css('font-size', xsize+2); });
回答5:
It's probably simplest to consider formatting your page for this functionality. E.g. use a fixed original body font-size, and have all elements use a font-size percentage. Then, you can simply use jQuery to set the body font-size, and all elements will adjust accordingly.
回答6:
Your question was quite unclear (changing whole page font size) while your coding seems to target the specific container classed .parent 'childrens'.
[credits to wared and Zaheer Ahmed ]
Your coding was close, but the simpliest jQuery method was to .test() with the .attr('style')
if (/font-size:[^;]+px/.test($(this).attr('style'))) { $(this).css("font-size","+=2"); }
Here is your solution jsFidled here :
$("#trigger").click(function() { /* the overall body tag for relative units */ $("body").css("font-size","+=5%"); /* targetting inlined font-size in pixels */ $('*').each(function (index, value) { if (/font-size:[^;]+px/.test($(this).attr('style'))) { $(this).css("font-size","+=2"); } }); });
