I need help for a jQuery fonction.
Per say, i want to change the font-size of the whole document, first task is to increment the font size of the <body> tag in order to make all relative units, like em or rem, modified. But what about inlined font-size and old-timer <font size="x">? Also, i want to apply the modification to line-height so everything re-format nicely.
Can someone help finish this code with a filter that will match :
<font size="2"><div style"font-size:14px;line-height:17px"><div style"font-size:14‘cm’, ‘mm’, ‘in’, ‘pt’, ‘pc’ and ‘px’;line-height:xyz">
html
<div class='parent' style='font-size:15px'>
<div>div 1 no inline styling</div>
<div style='font-size:1em'>div 2 inlined font-size 1em</div>
<div class='div-3'>div 3, CSS font-size:14px;</div>
<div style='font-size:22px'>div 4 inlined font-size 22px</div>
<div style='font-size:16pt'>div 5 inlined font-size 16pt</div>
<div style='font-size:80%'>div 6 inlined font-size 80%</div>
<div><font size="2">legacy html font size="2"</font></div>
</div>
<div id="output_box"></div>
After a few trys and helping answers from @wared and @ZaheerAhmed , i could reform this javascript. I don't know how to test for every lenght units targeted otherwise than a multiple if-then-else algorythm and the use of universal selector '*' might not be a good idea, any suggestions?.
javascript :
$("#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");
}
});
});
I prepared a jsFiddle
msdn values and units reference
Relative length units
- em The computed font-size. ex The height of a lowercase "x".
- px Pixels, relative to the viewing device.
- % Percentage.
- rem The font size of the root element.
- those are not to consider with actual question
- vw The viewport width.
- vh The viewport height.
- vm The smaller value of viewport width or height.
- ch Zero-width (width of the zero glyph in the rendering font).
Absolute length units
- in Inches (1 inch = 2.54 centimeters).
- cm Centimeters.
- mm Millimeters.
- pt Points (1 point = 1/72 inches).
- pc Picas (1 pica = 12 points).
A usefull article from Klemen Slavič
