How to get the css property from external css file if the inline style is applied?

Question

How to get the css property from external source using js/jquery if the inline style is applied to the same element? Example:

<div id="my" style='left:100px'>some content</div>
<style>
    #my{left:250px;}
</style>

I want to return 250px, if that's possible without removing the inline style?

You are specifically getting the stylings applied to an ID, correct? Because there's an easier way if you're talking about an element that does not have to be unique. — KRyan
– KRyan, Commented Aug 17, 2012 at 17:41

moettinger · Accepted Answer · 2012-08-17 18:58:04Z

3

Are you able to alter the markup after the page loads? If so, I would use jQuery to change the style attribute to an empty value. Then I would get the left value via jQuery.

var my = $('#my');
my.attr('style','');
var position = my.position();
alert(position.left);

or if you don't want to cache the var:

$('#my').attr('style','');
alert($('#my').position().left);

edited Aug 17, 2012 at 18:58

answered Aug 17, 2012 at 17:40

moettinger

5,2242 gold badges17 silver badges21 bronze badges

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

6 Comments

Gromer Over a year ago

This will work. I was already working on a Fiddle for this (jsfiddle.net/gromer/pRetH).

Chris Over a year ago

This works, but it might cause a slight "blink" between positions if you're going to restore the contents of style afterwards.

hjuster Over a year ago

Actually i am adding that inline-style after the page load, so i can get the css value before that function and store it in the global var. But i was just wondering if that's possible to achieve without that extra var? Your code is good , but i would stick to my current code...

moettinger Over a year ago

You could do it without the var. Just good practice in terms of speed to cache the object. That way, jQuery only has to search for the element once.

hjuster Over a year ago

Bravo Moettinger, that's it! If you want, write that as an answer so i can confirm it...

|

seymar · Accepted Answer · 2012-08-17 17:54:48Z

1

I think the best option is to just remove the inline style for a moment, reading it out and putting it back.

You won't see any graphical changes to the element while the style is taken away. It just goes too fast.

http://jsfiddle.net/fp7UB/

function readstyle() {
    var el = document.getElementById('my');
    var attr = el.getAttribute('style');
    el.setAttribute('style', '');
    var val = el.offsetLeft;
    el.setAttribute('style', attr);
    return val;
}

answered Aug 17, 2012 at 17:54

seymar

4,0736 gold badges28 silver badges31 bronze badges

Comments

Chris · Accepted Answer · 2012-08-17 18:04:58Z

0

One way to do this is to download the .css file via AJAX (you can use the easy-to-use jQuery $.get()), and then parse it using JSCSPP or something equivalent (another parser which is written in jQuery). While this might be considered an overkill, it gives you the advantage that you can access all the rules after one grabbing process.

answered Aug 17, 2012 at 18:04

Chris

27k6 gold badges61 silver badges72 bronze badges

Collectives™ on Stack Overflow

How to get the css property from external css file if the inline style is applied?

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related