jquery - 查找单个类的 CSS 规则

Question

如果我有一个元素 -

<div class="myDiv"></div>

myDiv 有一些规则适用于它 -

.myDiv {
    background:red;
}

然后我将另一个类应用于 myDiv -

$('.myDiv').addClass('newClass');

我的css中有一个这样的定义 -

.myDiv.newClass{
    position:relative;
    left:20px;
}

如何找出哪些规则专门适用于 $('.myDiv.newClass')？我想要一个返回包含 css 规则的对象的函数。

结果将是这样的 -

{
    "position":"relative",
    "left":"20px"
}

Answer 1

window.getComputedStyle()也许你在找什么 - https://developer.mozilla.org/en/DOM/window.getComputedStyle

Answer 2

一篇关于获取样式的非常好的文章 - 与浏览器兼容

怪癖

上面给出的like是您问题的通用解决方案。

Answer 3

我不想返回任何仅适用于 .myDiv 的规则

在这种情况下，您应该从元素中删除此类并更改 CSS 结构：

$('.myDiv').addClass('newClass');    
$('.myDiv').removeClass('myDiv');

然后改变：

.myDiv.newClass {}

至：

.newClass {}

如果您需要查看现在应用到该 div 的样式，您可以使用Google Chrome或FireBug来“检查元素” 。