jquery - 如果应用了内联样式，如何从外部 css 文件中获取 css 属性？

Question

如果内联样式应用于同一元素，如何使用 js/jquery 从外部源获取 css 属性？例子：

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

我想返回 250px，如果可以不删除内联样式的话？

Answer 1

您可以在页面加载后更改标记吗？如果是这样，我会使用 jQuery 将样式属性更改为空值。然后我会通过 jQuery 得到左值。

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

或者如果您不想缓存 var：

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

Answer 2

我认为最好的选择是暂时删除内联样式，将其读出并放回原处。

当样式被移除时，您不会看到元素的任何图形更改。它只是太快了。

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

Answer 3

一种方法是.css通过 AJAX 下载文件（您可以使用易于使用的jQuery $.get()），然后使用JSCSPP或等效的东西（另一个用 jQuery 编写的解析器）对其进行解析。虽然这可能被认为是一种矫枉过正，但它为您提供了一个优势，即您可以在一个抓取过程之后访问所有规则。