jQuery检索直接设置在元素上的CSS样式集

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"。那么我如何确定哪些样式实际上已经被设置为内联样式？

- erikkallen

---

如果 css('position') 显示为 relative，那是因为它被设置成了相对定位，使用了你的 CSS 类 MyClass... 然而，div1 应该被报告为 "absolute"。 - peirix

@peirix：我知道，渲染是正确的。然而，我想知道是否将其设置为内联。有时我也会将位置设置为相对于内联，因此我需要区分所有这些情况。 - erikkallen

哦，那么你的问题是是否有一种方法可以知道某个样式是在行内设置还是使用CSS标记？在这种情况下，我不认为有，除非像TTG所建议的那样检查它的样式属性并解析其中的信息... - peirix

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}

然后您可以使用类选择器代替：

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

- James Wiseman

---

+1。不是因为它解决了我的问题，而是因为这是一件非常酷的事情。然而，由于问题陈述中提到的原因，我无法使用.css('position')。 - erikkallen

刚刚收到了一个踩，却没有任何解释。这真的让我很烦（不是因为被踩了，而是缺乏解释）。 - James Wiseman

Answer 2

我最终做了什么。

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

但我希望能有更符合jQuery风格的做法。

- erikkallen

---

你可以将这段代码放入自定义选择器中，如下面我的答案所述。 - James Wiseman

我可以这样做，但这并不能帮助我。我的问题是“给定此元素，其位置是否设置为相对位置？”，但制作自定义选择器可以解决问题“给定这些对象，其中哪些对象的位置设置为相对位置？”这也可能是某人需要解决的问题，但不是我，至少现在不是。 - erikkallen

Answer 3

那么 .attr('style') 怎么样？
这里有一个jQuery文档的链接。

- Traveling Tech Guy

---

只需记住，如果您使用 attr('style')，则会返回“position:relative”和其他所有内联样式... - peirix

我可以这样做，但是那样我就必须解析返回的字符串。我将设置比位置内联更多的样式。 - erikkallen

Answer 4

你可以使用.css方法，它会返回与元素相关联的所有样式。

- James Brooks

---

我在问题中已经说明了为什么我不能这样做。 - erikkallen