【问题标题】：Find elements which have greater font-size than specified查找字体大小大于指定的元素
【发布时间】：2011-05-23 10:05:00
【问题描述】：

我正在尝试定义一个 JQuery 语句来查找具有大于（或分别小于）font-size 比输入值的元素。

可能的输入值：

"12px"
"14pt"
"120%"
and so on...

我的第一种方法更像是草稿，因为它不能以这种方式工作。但也许你有如何实现解决方案的想法。这是我到目前为止所拥有的（输入值来自其他地方并且是可变的）：

$('*').filter(function() {
    return $(this).css('font-size') > '12px';
})

有人吗？

更新

我被要求解释为什么我需要这样的东西。我正在使用 Java 中的 Selenium2 编写一个 API，它能够以更简单、更可靠的方式查找元素并与它们进行交互。这个函数将允许我编写像browser.find().titleElements() 这样的代码，它可以选择所有h1、h2、...标签，还可以选择字体大小大于页面上平均文本的元素。

该框架还将提供选择在视觉上彼此靠近或在特定方向上的元素的功能：

HtmlElement nameLabel = browser.find().labelElement("name");
HtmlElement nameInput = browser.find().closestInputElement(nameLabel);
nameInput.below("tos").select();

【问题讨论】：

相对字体大小会非常棘手。 Crescent Fresh 对此问题的回应：stackoverflow.com/questions/1313995/… 详细说明了 jQuery 如何始终返回字体大小的像素值。因此，使用 jQuery，我认为您需要一种方法将您的 pt、em、pct 等输入类型转换为像素，这是我无法想象的。正如那个答案所指出的那样，可能有一种仅限 IE、非 jQuery 的方式来做到这一点。

标签： jquery css jquery-selectors filter

【解决方案1】：

我制作了一个小插件，它能够获取您要求的所有参数。不知道它有多准确，因为我很匆忙。如果您的 DPI 不是 72，pt 肯定会关闭。

插件代码

(function($){
    $.fn.filterByFontSize = function(size){
        // Local scope vars
        var relative = false,
            matches = size
                .toString()
                .match(/^\d+(?:\.\d+)?(pt|em|%)$/i);

        // Parse size
        size = parseFloat(size, 10);

        // Check matches
        if (matches !== null) {
            switch (matches[1]) { 
                case "pt":
                    size = size*96/72;
                break;
                case "em":
                    relative = true;
                break;
                case "%":
                    relative = true;
                    size = (size/100)+0.01;
                break;
            }
        }

        // Filter elements accordingly
        return this.filter(function(){
            var $this = $(this),
                thisSize = parseInt(
                    $this.css("font-size"), 10);
            if (relative) {
                var parent = $this.parent();
                if (parent[0] === document) {
                    parent =  $(document.body);
                }
                var parentSize = parseInt(
                        parent.css("font-size"), 10);
                return parentSize*size < thisSize;
            } else {
                return thisSize > size;
            }
        });

    };
})(jQuery);

用法

var bigTextElements = $("h1,h2,h3,p").filterByFontSize("24px");

您可以在test case on jsFiddle 中试用。

感谢 converter 帮助优化。

【讨论】：

为什么不使用更简单的正则表达式？ /^(\d+)(pt|em|%)$/i - 那么你只需要检查是matches[2] == 'pt'还是matches[2] == 'em'等
@configurator，是的。我确信它可以被优化。我根本不是正则表达式专家。谢谢，我会改的！ ;)
我稍微重构了您的代码 - 删除了冗余，使其更加清晰 IMO。看一看：pastebin.com/EZ94bG3f
@configurator，非常好！不过，您必须在正则表达式中添加对小数的支持。否则这或多或少是完美的:)
感谢你们俩。我更新了我的问题以解释它的目的。

【解决方案2】：

你需要解析字体大小...

试试这个方法。。

$('*').filter(function() {
    return parseInt($(this).css('font-size')) > '12px';
})

【讨论】：

不会给你计算的大小，是吗？

【解决方案3】：

你可以像这样使用 parseint：

function greaterThan(e, size = 12) {
    if (parseInt(e.css('font-size')) > size) {
        return true;
    }
    return false;
}

然后这样称呼它：

var isBigger = greaterThan($(this));

【讨论】：

JavaScript什么时候有了默认参数？