查找单个类的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

  

我不希望返回任何仅适用于.myDiv

的规则

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

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

然后改变：

.myDiv.newClass {}

为：

.newClass {}

如果您需要查看现在应用于该div的哪些样式，您可以使用Inspect Element或Google Chrome“FireBug”。

Answer 2

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

Answer 3

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

Quirks

以上给出的是对您的问题的一般解决方案。