查找字体大小超过指定的元素
我正在尝试定义一个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
,…标签,以及字体大小比页面上的平均文本大的元素。
该框架还将提供选择视觉上彼此靠近或在特定方向上的元素的function:
HtmlElement nameLabel = browser.find().labelElement("name"); HtmlElement nameInput = browser.find().closestInputElement(nameLabel); nameInput.below("tos").select();
我做了一个小插件,可以获取你要求的所有参数。 不知道自从我匆匆做出来以来有多准确。 如果您的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");
你可以在jsFiddle上的这个测试用例中试一试 。
转换器的额外信用,以帮助优化。
您可以使用parseint,如下所示:
function greaterThan(e, size = 12) { if (parseInt(e.css('font-size')) > size) { return true; } return false; }
并称之为:
var isBigger = greaterThan($(this));
你需要解析字体大小……
试试这种方式..
$('*').filter(function() { return parseInt($(this).css('font-size')) > '12px'; })