match elements with inline-style font-size for every absolute lengths units

问题

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č

回答1:

First task is to increment the font size of the tag in order to make all relative units, like em or rem, modified

Yes, you are right.

But what about inlined font-size and old-timer <font size="x">?

Remove all of them and use a stylesheet. You should separate presentation from content.

来源：https://stackoverflow.com/questions/20937296/match-elements-with-inline-style-font-size-for-every-absolute-lengths-units

标签

javascript

regex

user-interface

jquery-selectors