Question

我尝试使用getElementsByClassName方法打印特定CSS类中的属性值列表，如下所示：

<html>
    <head>
        <style>
            .toto {
                width:200px;
                height:50px;
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div id="lol" class="toto"></div>
        <script language="javascript" type="text/javascript">
            var toto = document.getElementsByClassName('toto');
            if (toto) {
                for (int i; i < toto.length; i++)
                    document.write(toto[i]);
            }
        </script>
    </body>
</html>

但在所有情况下toto.length = 1。我想打印值'200px'，'50px'et'red'。有人能帮帮我吗？非常感谢您的帮助。

Answer 1

我认为你误解了getElementsByClassName的作用。

getElementsByClassName会返回分配了类的所有HTML元素（标记） - 在您的示例中，这是一个div，这就是toto.length == 1的原因。

我不知道任何用于枚举给定CSS选择器的属性的DOM方法。但是，您可以使用FireBug或Chrome开发人员工具等工具检查元素，查看已应用的CSS规则以及已修改的属性。

Answer 2

如果通过JavaScript获得对元素的引用，通常只能使用元素的style-attribute获取通过内联CSS设置的CSS属性。通过CSS应用的属性无法通过元素作为该元素的属性读取。

但是，您可以在循环中使用window.getComputedStyle()来获取已应用于元素的最终计算CSS。

在你的情况下，它会是这样的：

var toto = document.getElementsByClassName('toto');
if (toto) {
   for (int i; i < toto.length; i++)
      // Log the height of each element
      console.log(getComputedStyle(toto[i], null).getPropertyValue("height"));
   }
}

请注意，浏览器支持有限（IE9 +）。

Answer 3

我不会重复其他人指出getElementsByClassName返回多个元素的内容，但我认为如果你有兴趣了解你的风格而不是什么，你的方法并不是最好的方法。在特定元素中（通常应用了许多样式）。

即使没有具有类toto

的元素，这也是一个解决方案

function findStyle(selector) {
  for (var i=document.styleSheets.length; i-->0;) {
    for (var j = document.styleSheets[i].cssRules.length; j-->0;) {
      var r = document.styleSheets[i].cssRules[j];
      if (r.selectorText==selector) return r;
    }
  }
}
var style = findStyle('.toto');
console.log(style.style.width, style.style.height, style.style['background-color']);

这会在控制台200px 50px red

上登录

Demonstration

打印CSS类的属性列表

3 个答案: