Question

如何使用jQuery来确定元素是否具有内联的某种样式。

例如，给出文件

<style>
.MyClass { position: relative }
</style>
...
<div class="MyClass" id="div1" style="position: absolute"/>
<div class="MyClass" id="div2"/>
...
<script>
function f() {
    assert($('#div1').SOMETHING('position') == 'absolute');
    assert($('#div2').SOMETHING('position') == '');
}
</script>

如果我使用.css（'position'），则报告div2为'relative'。如何确定哪些样式实际设置为内联？

Answer 1

您可以创建自己的自定义选择器：

$(document).ready(function(){
    $.extend($.expr[':'], {
        positionAbsolute: positionAbsolute,
    });
});

function positionAbsolute(el) {
    return $(el).css("position").indexOf("absolute") >= 0;
}

然后像这样访问

if ($("#MyDiv").is(":positionAbsolute")){
    alert("Position absolute");
}

样式必须是内联的吗？如果你在CSS类中声明它，例如，

.positionAbsolute{position: absolute}

然后你可以使用类selctor：

if ($("#MyDiv").is(".positionAbsolute")){
    alert("Position absolute");
}

Answer 2

我最终做了

assert($('#div2').get(0).style.position == 'relative');

但是我希望有更多的jQueryish方式。

Answer 3

.attr('style')怎么样？
这里是jQuery文档的a link。

Answer 4

嗯，你可以使用.css方法，这将返回附加到该元素的所有样式。

jquery直接在元素上检索css样式集

4 个答案: