为每个绝对长度单位匹配具有内联样式字体大小的元素 [英] match elements with inline-style font-size for every absolute lengths units
问题描述
我需要有关jQuery功能的帮助.
I need help for a jQuery fonction.
可以说，我想更改整个文档的字体大小，第一个任务是增加<body>标记的字体大小，以便修改所有相对单位，例如em或rem.但是内联的字体大小和旧计时器<font size="x">呢?另外，我想对line-height应用修改，以便所有内容都重新格式化.
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">
<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和@ZaheerAhmed ，我可以改革此javascript.除了多重if-then-else算法之外，我不知道如何针对每个目标长度单元进行测试，使用通用选择器'*'可能不是一个好主意，有什么建议吗?.
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:
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");
}
});
});
我准备了一个jsFiddle
相对长度单位
- em计算的字体大小. ex小写字母"x"的高度.
- px像素，相对于查看设备.
- ％百分比.
- rem根元素的字体大小.
- 那些没有实际问题的人
- vw视口宽度.
- vh视口高度.
- vm视口宽度或高度中的较小值.
- ch零宽度(呈现字体中零字形的宽度).
- 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).
绝对长度单位
- 英寸(1英寸= 2.54厘米).
- cm厘米.
- 毫米毫米.
- pt点(1点= 1/72英寸).
- pc Picas(1 pica = 12点).
推荐答案
首要任务是增加标签的字体大小，以便 修改所有相对单位，例如em或rem
First task is to increment the font size of the tag in order to make all relative units, like em or rem, modified
是的，你是对的.
但是内联字体大小和旧计时器
<font size="x">呢?
全部删除并使用样式表.您应该将演示文稿与内容分开.
Remove all of them and use a stylesheet. You should separate presentation from content.
这篇关于为每个绝对长度单位匹配具有内联样式字体大小的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
