javascript - jquery匹配具有px样式字体大小的元素

Question

如何定位具有以像素为单位定义的内联样式字体大小的元素(例如:font-size:12px)，以便在单击按钮时修改字体大小。

有人可以帮忙完成这段 JavaScript 代码吗:

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>
<div id="output_box"></div>

JavaScript

$('*').filter(function() {
     /*var a-match-in-px-units = some-regular-expression-someelse-can-help-about;*/
     return $(this).css('font-size') == '11';
    $('#output_box').html($(this));
});

$("#trigger").click(function() {
    alert('to initialize font-size in px to bigger/lesser unit function()');    
   /* This is to apply font-resizing */     
});

我准备了a jsFiddle

我发现这个其他答案很有用Find elements which have greater font-size than specified

Answer 1

JQuery .css('font-size') 始终返回像素，即使原始大小是使用不同的单位定义的。我会使用 .attr('style') (仅适用于内联样式):

var result = $('*').filter(function () {
    var style = $(this).attr('style');
    return /font-size:[^;]+px/.test(style);
});

这是一个演示:http://jsfiddle.net/wared/8LcD9/ .