是否可以将所有全局/继承 css 类应用于元素？答案

【问题标题】：Is it possible to get all global/inherit css classes applied to an element?是否可以将所有全局/继承 css 类应用于元素？
【发布时间】：2011-05-03 17:51:02
【问题描述】：

我需要一个 javascript 函数，它可以让我获得应用于元素的所有 CSS 类。

我们有getComputedStyle(element,"")和currentStyle()这样的函数，分别是FF和IE。但是，这些函数只给了我应用于元素的 CSS 属性，而不是类。

为了让事情更清楚，请看下面的 DOM 结构。

<html>
 <head>
 <style>
.dd{
    font-weight:bold;
}
.dd span{
    border:solid 1px #ABABAB;
}
</style>
 </head>
 <body>
  <div class='dd'>  
    <span id='span1'>Hi this is a example</span>
  </div>
 </body>
</html>

现在，如果我得到元素“span1”，javascript 应该是什么，它应该为我提供应用于该元素的所有类。假设输出应该给我“.dd span 和 .dd”

【问题讨论】：

标签： javascript css class get parent

【解决方案1】：

document.getElementById('span1').className;

你可以使用.parentNode来获取各种父类。

而且，如果你给最顶层的父母一个position 样式，你可以使用这个：

var topmost = document.getElementById('span1').offsetParent;

for(var x = 0; x < topmost.childNodes.length;x++) {
  alert(topmost.childNodes[x].className);
}

// 编辑

看起来您正在尝试做 Firebug 类型的事情。 SO上的很多用户都尝试过同样的方法。一个好的搜索可能会带您找到您从未梦想过的东西......muhahahaha....

【讨论】：

Steve，我实际上是在寻找一个内置函数，它会返回给我一个 calsses 列表。我在网上搜索并没有找到任何东西。

【解决方案2】：

作为史蒂夫回答的延续，您可以遍历父节点并列出每个父节点的类名。

var listClasses = function(element){ 
    while(element){
        console.log(element.className);
        element = element.parentNode;
    }
}

使用：

listClasses(target);

【讨论】：