1

我尝试使用 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”和“red”。有人可以帮助我吗？非常感谢您的帮助。

4

3 回答 3

1

我想你误解了什么getElementsByClassName。

getElementsByClassName返回分配了一个类的所有 HTML 元素（标签） - 在您的示例中，这是一个div，这就是为什么toto.length == 1.

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

于 2013-01-14T12:14:35.363 回答
0

如果您通过 JavaScript 获取对元素的引用，您通常只能使用元素的样式属性获取通过内联 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+）。

于 2013-01-14T12:16:36.427 回答
0

我不会重复其他人已经指出的关于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

示范

于 2013-01-14T12:20:21.387 回答