{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 Root（大扎） 的问题《match elements with inline-style font-size for eve》','https://www.manongdao.com/q-1003428.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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).
Yes, you are right.
Remove all of them and use a stylesheet. You should separate presentation from content.