查找字体大小超过指定的元素

时间:2011-05-23 10:05:01

标签: jquery css jquery-selectors filter

我正在尝试定义一个JQuery语句,用于查找比输入值更大(或更少)font-size的元素。

可能的输入值:

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

我的第一种方法更多的是草案,因为它不能以这种方式工作。但也许你有想法如何实现解决方案。这是我到目前为止(输入值来自其他地方并且是可变的):

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

任何?

更新

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

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

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

3 个答案:

答案 0 :(得分:4)

我做了一个小插件,可以获取你要求的所有参数。不知道自从我匆忙做到这一点以来有多准确。如果您的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有助于优化的其他学分。

答案 1 :(得分:0)

您可以使用parseint,如下所示:

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

并将其称为:

var isBigger = greaterThan($(this));

答案 2 :(得分:0)

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

试试这个..

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