CODEWITHSUNDEEP
jquerycss
hjuster
hjuster

Reputation: 4070

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

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?

Upvotes: 0

Views: 1251

Answers (3)

moettinger
moettinger

Reputation: 5216

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

Upvotes: 3

Chris
Chris

Reputation: 26918

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.

Upvotes: 0

seymar
seymar

Reputation: 4063

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;
}​

Upvotes: 1

Related Questions