Javascript 如何确定DOM对象上的CSS选择器？

我有一个元素，比如element=document.getElementyById（“myElement”）

现在，让我们假设有一些CSS通过各种方法应用于它，如#id、.class和tagName

我们知道#id的优先级高于.class，.class的优先级高于标记名。我想确定上面哪种方法应用于该元素，也就是说，我想看看is是否使用id、class或tag对其应用了CSS。我怎么知道呢？有JavaScript库可用于此吗？

为什么不检查一下

element = document.getElementyById("myElement");
if (element.tagName != "") { ... }
if (element.id != "") { ... }
if (element.className != "") { ... }

---

浏览

document.styleSheets

对象，遍历每个样式表对象，然后遍历每个规则。然后，您必须解析

selectorText

属性，基本上编写您自己的CSS解析器，同时根据每个选择器的特定性维护一个内部数组

比较当前规则与以前规则的特殊性，然后确定哪个属性覆盖哪个属性。在所有这些之后，您仍然需要检查继承性——检查相关元素的每个父元素并查找可以继承的属性，如果尚未在子元素上设置这些属性，则将它们添加到此列表中。这也意味着您需要维护一组继承的属性

---

如果你还没有意识到，这是一项艰巨的任务。为什么不直接使用浏览器上可用的任何开发工具，看看这些工具提供的CSS规则呢

有人问过这一点，还有许多其他地方。

一个元素可以使用这些方法中的任何一种或其混合方法应用CSS；大多数情况下，它有几个样式，每个样式都使用混合的规则。因此，这是一个非常复杂的问题，而且由于其复杂性，还没有很好的定义。目前的问题是，对于一个普通网站上的大多数元素，答案都是“全部三个”。我可以问一下你想用它做什么吗？祖先也会继承css规则。。你应该使用firebug，它显示了所有案例和细节。实际上，我正在开发类似于firebug的东西，我需要CSS选择器。一旦我知道了，我就可以更改CSS并使用该选择器在浏览器中呈现该元素。window.getcomputedstyle（元素）怎么样？@UmairP-“

getcomputedstyle（）

提供元素的所有CSS属性的值。”这些问题链接与应用的样式有关，而不是每个元素使用的选择器有关。你是对的，而且它也不是一个真正的信息性答案，只是几个链接。我想删除，但已被接受：(