jquery retrieve css style set directly on element

Question

How can I use jQuery to determine whether an element has a certain style set inline.

E.g, given the document

<style>
.MyClass { position: relative }
</style>
...
<div class="MyClass" id="div1" style="position: absolute"/>
<div class="MyClass" id="div2"/>
...
<script>
function f() {
    assert($('#div1').SOMETHING('position') == 'absolute');
    assert($('#div2').SOMETHING('position') == '');
}
</script>

If I use .css('position'), div2 is reported as being 'relative'. How can I determine which styles have actually been set inline?

if css('position') says relative, then that's because it is set to relative with your CSS class MyClass... div1, however should be reported as "absolute". — peirix
– peirix, Commented Sep 3, 2009 at 11:25
@peirix: I know, and the rendering is correct. However, I want to know whether I've set it inline. And sometimes I set position: relative inline as well, so I need to distinguish all these cases. — erikkallen
– erikkallen, Commented Sep 3, 2009 at 11:30
Oh. So what you're asking is if there is a way to know wether a certain style is set inline or using CSS markup? In which case I don't really think there is, except checking its style attribute as TTG suggests below, and parsing it for information... — peirix
– peirix, Commented Sep 3, 2009 at 11:36

Mutation Person · Accepted Answer · 2009-09-03 11:57:40Z

3

You could create your own custom selector:

$(document).ready(function(){
    $.extend($.expr[':'], {
        positionAbsolute: positionAbsolute,
    });
});

function positionAbsolute(el) {
    return $(el).css("position").indexOf("absolute") >= 0;
}

And then access this like so

if ($("#MyDiv").is(":positionAbsolute")){
    alert("Position absolute");
}

Does the style have to be inline? If you declared it in a CSS class, e.g,

.positionAbsolute{position: absolute}

and then you could use a class selctor instead:

if ($("#MyDiv").is(".positionAbsolute")){
    alert("Position absolute");
}

edited Sep 3, 2009 at 11:57

answered Sep 3, 2009 at 11:52

Mutation Person

30.6k18 gold badges102 silver badges166 bronze badges

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

2 Comments

erikkallen Over a year ago

+1. Not because it solved my problem, but because it's a really cool thing to do. However, For the reason stated in the question I can not use .css('position')

Mutation Person Over a year ago

Just got a down vote, and no explanation. That really irritates me (not the down vote, but the lack of explanation).

erikkallen · Accepted Answer · 2009-09-03 12:41:04Z

2

I ended up doing

assert($('#div2').get(0).style.position == 'relative');

but I was hoping for a more jQueryish way of doing it.

answered Sep 3, 2009 at 12:41

erikkallen

34.6k14 gold badges90 silver badges121 bronze badges

2 Comments

Mutation Person Over a year ago

You could put this code into the custom selector as desribed in my answer below

erikkallen Over a year ago

I could, but it wouldn't help me. My problem is "given this element, is its position set to relative?", but making the custom selector would solve the problem "Given these objects, which of them have their position set to relative?". That could also be a problem which someone need to solve, but not me, at least not now.

Traveling Tech Guy · Accepted Answer · 2009-09-03 11:24:40Z

1

what about .attr('style')?
And here's a link to the jQuery docs.

answered Sep 3, 2009 at 11:24

Traveling Tech Guy

27.9k25 gold badges117 silver badges166 bronze badges

2 Comments

peirix Over a year ago

just remember that if you use attr('style') you get "position:relative" in return and every other inline style as well...

erikkallen Over a year ago

I could do that, but then I'd have to parse the returned string. I'm going to set more styles than the position inline.

James Brooks · Accepted Answer · 2009-09-03 11:56:56Z

-1

Well you could just use the .css method, this returns all of the styles attached to that element.

answered Sep 3, 2009 at 11:56

James Brooks

1,3095 gold badges18 silver badges28 bronze badges

1 Comment

erikkallen Over a year ago

I stated in the question why I could not do that.

Collectives™ on Stack Overflow

jquery retrieve css style set directly on element

4 Answers 4

2 Comments

2 Comments

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

1 Comment

Related