查找字体大小大于指定字体大小的元素 [英] Find elements which have greater font-size than specified

问题描述

我试图定义一个JQuery语句，用于查找比输入值更大（或更小） font-size 的元素。

可能的输入值：

 12px
14pt
120％
等等... 
  

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

  $（'*'）。 filter（function（）{
 return $（this）.css（'font-size'）>'12px'; 
}）
  

任何人？

更新

要求解释为什么我会需要这样的东西。我在Java中使用Selenium2编写一个API，它能够以更容易和更可靠的方式查找元素并与它们进行交互。此函数将允许我编写代码 browser.find（）。titleElements（），其选择所有 h1 code> h2 ，...标签，但也包含比页面上的平均文本更大字体大小的元素。

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

  HtmlElement nameLabel = browser.find（）。labelElement（name）; 
 HtmlElement nameInput = browser.find（）。closestInputElement（nameLabel）; 
 nameInput.below（tos）。select（）; 
  

解决方案

我做了一个小插件，参数你要求。不知道它是多么准确，因为我在一个仓促。

插件代码 >

 （function（$）{
 $ .fn.filterByFontSize = function（size）{
 // local scope vars 
 var relative = false，
 matches = size 
 .toString（）
 .match（/ ^ \d +（?: \.\d + ）？（pt | em |％）$ / i）; 
 
 //分析大小
 size = parseFloat（size，10）; 
 
 //匹配
 if（matches！== null）{
 switch（matches [1]）{
 casept：
 size = size * 96/72; 
 break; 
 caseem：
 relative = true; 
 break; 
 case％：
 relative = true; 
 size = size = 100）+0.01; 
 break; 
} 
} 
 
 //相应地过滤元素
 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>尺寸; 
} 
}）; 
 
}; 
}）（jQuery）; 
  

使用

  var bigTextElements = $（h1，h2，h3，p）filterByFontSize（24px）; 
  

您可以在此测试用例在jsFiddle 。

额外资助转换器帮助优化。

I am trying to define a JQuery statement for finding elements which have a greater (or lesser respectively) font-size than an input value.

Possible input values:

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

My first approach is more of a draft because it cannot work this way. But maybe you have ideas how to achieve a solution. Here is what i have so far (the input value comes from elsewhere and is variable):

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

Anyone?

Update

I was asked to explain why i would need something like this. I am writing an API using Selenium2 in Java, which is able to find elements and interact with them in an easier and more reliable way. This function will allow me to write code like browser.find().titleElements() which selects all h1, h2,... tags, but also elements which have a greater font-size than the average text on the page.

The framework will also provide functions to select elements which are visually close to each other or in a specific direction:

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

解决方案

I made a small plugin that's able to take all the parameters you ask for. No idea how accurate it is since I made it in a rush. pt will definately be off if your DPI is anything other than 72.

Plugin code

(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);

Usage

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

You can try it out in this test case on jsFiddle.

Additional credits to converter for helping out with the optimization.

这篇关于查找字体大小大于指定字体大小的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！