将同一个ID的多个div更改为不同的高度

因此，我有多个具有相同ID的“div”的div。我想遍历所有这些元素，并给每个随机高度。这里是我试过的：将同一个ID的多个div更改为不同的高度

<script type="text/javascript"> 
     for(var i = 0; i < 47; i++) { 
      var rand = 200; 
      document.getElementsById('stick')[i].style.height= rand+'px'; 
     } 
    </script>

这段代码并不可悲。我错过了什么吗？

谢谢。

来源

2013-03-09 Duncan Palmer

你不应该超过一个元素添加相同的ID。使用类名称。并且document.getElemetsById不是一个已定义的函数，只有document.getElementById（不含“s”）应该返回一个元素。

HTML：

<div class="stick"> </div> 
    <div class="stick"> </div>

JS：

<script type="text/javascript"> 
    var divs = document.getElementsByClassName('stick'); 
    for(var i = 0; i < divs.length; i++) { 
     var rand = 200 * Math.random(); 
     divs[i].style.height= rand+'px'; 
    } 
</script>

这可能工作。但是，我建议使用jQuery框架，对JavaScript编码，因为这些线路中的jQuery成为一个简单的代码：

<script type="text/javascript"> 
    $('.stick').each(function(){   //iterates all elements having stick class 
     $(this).height(200 * Math.random());  //inside the callback the 'this' is the current html element. etc ... 
    }); 
</script>

jQuery的主页：http://jquery.com/

快速，包括到您的网站，刚刚从CDN网址导入了jQuery ，头内：

<head> 
     ... 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 
    </head>

来源

2013-03-09 09:11:52 Kovge

ID在文档中应该是完全唯一的。将您的ID更改为唯一值，并且可以单独引用它们。如果您希望对一系列元素采取行动，请使用class标签将它们链接在一起。要阅读CSS Classes，你可以看看this documentation。这将帮助您了解HTML和CSS中类的用途。

你的问题

getElementsByID()不起作用。 getElementByID()是正确的语法。

所以

document.getElementsById('stick')[i].style.height= rand+'px';

将成为

document.getElementById('stick')[i].style.height= rand+'px';

来源

2013-03-09 09:11:43 christopher

你不能有多个相同的元素id。 id必须是唯一。您需要使用class并使用类名称检索元素。你可以使用jquery来协助你：var elements = $('.stick')

来源

2013-03-09 09:12:01 sweetamylase

将同一个ID的多个div更改为不同的高度

回答

相关问题