Find elements which have greater font-size than sp

Question

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

Answer 1

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.

Answer 2

You can use parseint so something like this:

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

and call it like this:

var isBigger = greaterThan($(this));

Answer 3

you need to parse the font size...

try this way..

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