Question

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

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

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

Answer 1

您是否可以在页面加载后更改标记？如果是这样，我会使用jQuery将style属性更改为空值。然后我会通过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

执行此操作的一种方法是通过AJAX下载.css文件（您可以使用易于使用的 jQuery $.get()），然后使用它解析它JSCSPP或类似内容（another parser which is written in jQuery)。虽然这可能被视为过度杀伤，但它可以让您在一次抓取过程后访问所有规则。

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

3 个答案: