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.

you can create a custom selector here is a SO link that will help stackoverflow.com/questions/1180067/… — Rafay
– Rafay, Commented Jul 26, 2011 at 10:18
You can also use .filter to implement filtering yourself (use .css inside .filter). — pimvdb
– pimvdb, Commented Jul 26, 2011 at 10:23
I have posted the correct solution + jsfiddle sample in my post. — zatatatata
– zatatatata, Commented Jul 26, 2011 at 11:27

Community · Accepted Answer · 2017-05-23 12:22:34Z

5

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')");

edited May 23, 2017 at 12:22

CommunityBot

11 silver badge

answered Jul 26, 2011 at 10:21

Brian Scott

9,3697 gold badges50 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darkry Over a year ago

This solution works so I choose it as the accepted answer but in my problem I finally used id.

BonyT · Accepted Answer · 2011-07-26 10:45:06Z

5

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.

edited Jul 26, 2011 at 10:45

answered Jul 26, 2011 at 10:17

BonyT

11k5 gold badges34 silver badges53 bronze badges

3 Comments

Darkry Over a year ago

Ok. Of course I can do it, I just wanted to ask if there is any possibility how to do this with css values.

BonyT Over a year ago

but why would you want to? css is for styling elements, not identifying them! If you mix the two, you're creating a potential maintenance nightmare!

knut Over a year ago

I could see why, what if this was some kind of game? And hundreds of elements were created dynamically. It would not make sense to create one separate CSS class for each and every position up front. Then you would have to select individual elements in some way. I have proposed a way to do this with jQuery out of the box.

knut · Accepted Answer · 2011-07-26 11:03:18Z

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>

edited Jul 26, 2011 at 11:03

answered Jul 26, 2011 at 10:30

knut

4,7474 gold badges36 silver badges43 bronze badges

Comments

Raptor · Accepted Answer · 2011-07-26 10:18:42Z

1

When you generate these DIV, assign them with unique id attribute. Then you can retrieve the DIV object with the id attribute.

answered Jul 26, 2011 at 10:18

Raptor

54.4k47 gold badges254 silver badges405 bronze badges

Comments

Dumitru Ceban · Accepted Answer · 2011-07-26 10:21:11Z

1

Give them a class or id and select them using class/id, it will be much faster. Otherwise you'll need to find them all and filter by css values.

answered Jul 26, 2011 at 10:21

Dumitru Ceban

6404 silver badges8 bronze badges

Comments

Litek · Accepted Answer · 2011-07-26 10:46:02Z

1

you can select element by contents of style attribute (pay attention to spaces):

$('div[style*="top: 252px; left: 54px"]').css("color","red")

Example.

But like BonyT said - you should rather put the values into an id or class.

answered Jul 26, 2011 at 10:46

Litek

4,8782 gold badges26 silver badges28 bronze badges

Comments

zatatatata · Accepted Answer · 2011-07-26 11:26:36Z

1

Use

function findElement (top, left) {
    return target = $('div').filter(function() {
        var div = $(this);
        if (parseInt(div.css('top')) == top && parseInt(div.css('left')) == left )
            return true;
        return false;
    });
}

See the jsfiddle sample

edited Jul 26, 2011 at 11:26

answered Jul 26, 2011 at 10:17

zatatatata

4,8212 gold badges22 silver badges42 bronze badges

Collectives™ on Stack Overflow

Select HTML element by CSS property value in style attribute

7 Answers 7

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

3 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related