Reputation: 4070
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
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
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
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.
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