Select HTML element by CSS property value in style attribute

Question

I have HTML like this:

…
<div style="top: 252px; left: 54px;"></div> 
<div style="top: 252px; left: 162px;"></div> 
<div style="top: 288px; left: 108px;"></div>
…

I have a JavaScript object literal like this:

var pos = { top: 252, left: 54 };

I want to select the element with the position that the object literal indicates. Positions are unique, so only one element will be selected.

Thank you for answers.

Answer 1

Credit goes to the original poster here;

jQuery find by inline css attribute

The function is 'styleEquals' and can be implemented as;

jQuery.extend(jQuery.expr[':'], {
    styleEquals: function(a, i, m){
        var styles = $(a).attr("style").split(" ")
        var found = false;
        for (var i = 0; i < styles.length; i++) {
                if (styles[i]===m[3]) {
                        found = true;
                        break;
                }
        }
        return found;
    }
});

You can then search elements by their style attribute values using your new jquery extensions function such as;

$("div:styleEquals('top=252px'):styleEquals('left:54px')");

Answer 2

All I can say is don't do this!

If you can add a unique position style to a div, you can equally easily add an identifier at the same time.

Use this identifier to select the element in javascript, not the css positioning.

Answer 3

You can do it like this with the jQuery JavaScript library out of the box:

var pos = { top: 252, left: 54 };
$('div[style*="top: ' + pos.top + 'px"][style*="left: ' + pos.left + 'px"]');

You need to make sure to use white space consistently. If you type:

<div style="top:252px; left:54px;"></div>

the proposed selector will not work.

You can also add other CSS properties to the style attribute by using my example code, and the order would not matter. Here is an example:

<div style="left: 54px; background: gray; top: 252px;"></div>