Question

我需要一个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>

现在javascript应该是什么，如果我得到元素'span1'它应该给我所有应用于这个元素的类。说输出应该给我“.dd span和.dd”

Answer 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类型的东西。这里的很多用户都尝试过同样的方法。一个好的搜索可能会引导你做你梦寐以求的事情... muhahahaha ....

Answer 2

作为史蒂夫答案的延续，您可以循环访问父节点并列出每个父节点的类名。

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

使用：

listClasses(target);

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

2 个答案: