我想要定義一個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

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

更新

回答

相關問題