Javascript 打印CSS类中的属性列表_Javascript_Getelementsbyclassname

Javascript 打印CSS类中的属性列表

javascript

Javascript 打印CSS类中的属性列表,javascript,getelementsbyclassname,Javascript,Getelementsbyclassname,我尝试使用GetElementsByCassName方法打印特定CSS类中的属性值列表，如下所示： <html> <head> <style> .toto { width:200px; height:50px; background-color:red; } </style

我尝试使用GetElementsByCassName方法打印特定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>


托托先生{
宽度：200px；
高度：50px；
背景色：红色；
}
var toto=document.getElementsByClassName（'toto'）；
如果（toto）{
for（int i；i


但在所有情况下，toto.length=1。我想打印值“200px”、“50px”和“red”。有人能帮我吗？非常感谢您的帮助。
我想您误解了getElementsByClassName
的作用
getElementsByClassName
返回分配了类的所有HTML元素（标记）-在您的示例中，这是一个div
，这就是toto.length==1的原因
我不知道有任何DOM方法可以枚举给定CSS选择器的属性。但是，您可以使用诸如或Chrome的开发人员工具之类的工具来检查元素，并查看应用了哪些CSS规则以及修改了哪些属性。
我认为您误解了getElementsByClassName
的功能
getElementsByClassName
返回分配了类的所有HTML元素（标记）-在您的示例中，这是一个div
，这就是toto.length==1的原因
我不知道有任何DOM方法可以枚举给定CSS选择器的属性。但是，您可以使用诸如或Chrome的开发人员工具之类的工具来检查元素，并查看应用了哪些CSS规则，以及修改了哪些属性。
如果您通过JavaScript获取对元素的引用，则通常只能获取通过使用元素的style属性的内联CSS设置的CSS属性。通过CSS应用的属性不能作为该元素的属性通过该元素读取
但是，您可以在循环中使用，以获得应用于元素的最终计算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"));
   }
}

var toto=document.getElementsByClassName（'toto'）；
如果（toto）{
for（int i；i

请注意，浏览器支持有些有限（IE9+）。
如果通过JavaScript获取对元素的引用，通常只能获取使用元素的样式属性通过内联CSS设置的CSS属性。通过CSS应用的属性不能作为该元素的属性通过该元素读取
但是，您可以在循环中使用，以获得应用于元素的最终计算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"));
   }
}

var toto=document.getElementsByClassName（'toto'）；
如果（toto）{
for（int i；i

请注意，浏览器支持有些有限（IE9+）。
关于返回多个元素的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

我不会重复其他人关于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

getElementsByCassName
返回具有所述类的DOM元素（并且只有一个）。它不允许您访问该类的CSS规则。有关解决方案，请查看的底部。getElementsByCassName
返回具有所述类的DOM元素（并且只有一个）。它不允许您访问该类的CSS规则。有关解决方案，请查看的底部。非常感谢您的回答。非常感谢您的回答。