Question

我需要jQuery功能的帮助。

每个人说，我想改变整个文档的字体大小，第一个任务是增加<body>标签的字体大小，以便修改所有相关单位，如em或rem。但是内联字体大小和老定时器<font size="x">怎么样？此外，我想将修改应用于line-height，以便所有内容都能很好地重新格式化。

有人可以通过匹配的过滤器帮助完成此代码：

<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>

经过几次尝试并帮助@wared and @ZaheerAhmed 的答案，我可以改革这个javascript。我不知道如何测试每个长度单位而不是多个if-then-else算法，并且使用通用选择器'*'可能不是一个好主意，任何建议？。

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");
        }
    });
});

我准备了a jsFiddle

msdn values and units reference

相对长度单位

em计算出的字体大小。 ex小写“x”的高度。
px像素，相对于观看设备。
％百分比。
rem根元素的字体大小。
不考虑实际问题
vw视口宽度。
vh视口高度。
vm视口宽度或高度的较小值。
ch零宽度（渲染字体中零字形的宽度）。

绝对长度单位

in Inches（1英寸= 2.54厘米）。
cm厘米。
mm毫米。
点数（1点= 1/72英寸）。
pc Picas（1 pica = 12分）。

A usefull article from Klemen Slavič

Answer 1

首要任务是增加标签的字体大小使所有相关单位，如em或rem，修改

是的，你是对的。

但内联font-size和old-timer <font size="x">呢？

删除所有这些并使用样式表。您应该将演示文稿与内容分开。

为每个绝对长度单位匹配具有内联样式字体大小的元素

1 个答案: