我想要定义一个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();

来源

2011-05-23 Alp

这对于相对字体大小来说会非常棘手。 Crescent Fresh对此的回应问：http://stackoverflow.com/questions/1313995/how-can-i-get-the-font-size-of-an-element-as-it-was-set-by-css详细介绍了jQuery如何总是返回字体大小的像素值。所以对于jQuery，我认为你需要一种方法来让你的pt，em，pct等输入类型转换为像素，这是我无法想象的。正如那个答案指出的那样，可能有一个IE浏览器，非jQuery的方式来做到这一点。 – Faust 2011-05-23 10:28:30

我做了一个小插件，它是能够采取一切你要求的参数。不知道自从我急于做到它有多准确。 pt一定会被关闭，如果你的DPI名不是72

插件代码

(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帮助优化。

来源

2011-05-23 11:23:12 mekwall

为什么不使用更简单的正则表达式？ '/ ^（\ d +）（pt | em |％）$/i' - 那么你只需要检查'match [2] =='pt''或'matches [2] =='em''，等等 – configurator 2011-05-23 11:48:09

@configurator，yup。我确信它可以被优化。我根本不是正则表达式。谢谢，我会改变它！ ;） – mekwall 2011-05-23 11:51:53

我重构了你的代码 - 删除冗余，使它更清晰IMO。看看：http://pastebin.com/EZ94bG3f – configurator 2011-05-23 11:59:06

可以使用parseInt函数所以是这样的：

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

和这样称呼：

var isBigger = greaterThan($(this));

来源

2011-05-23 10:12:23 udjamaflip

从什么时候JavaScript有默认参数？ – configurator 2011-05-23 11:50:33

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

尝试这种方式..

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

来源

2011-05-23 10:13:55 Vivek

不给你计算的大小，是吗？ – 2011-05-23 10:15:46

查找具有比指定的更大的字体大小的元素

更新

回答

相关问题