0

所以我有多个具有相同 id 'stick' 的 div。我想遍历所有这些元素并给每个元素一个随机高度。这是我尝试过的：

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

可悲的是，此代码不起作用。我错过了什么吗？

谢谢。

4

3 回答 3

5

您不应为多个元素添加相同的 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 url 导入 jQuery：

   <head>
       ...
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
   </head>
于 2013-03-09T09:11:52.077 回答
0

ID 在文档中应该是完全唯一的。将您的 ID 更改为唯一值，您可以单独引用它们。如果您希望对一组元素进行操作，请使用class标签将它们链接在一起。要继续阅读，CSS Classes您可以查看此文档。这将帮助您了解 HTML 和 CSS 中类的用途。

你的问题

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

所以

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

会变成

document.getElementById('stick')[i].style.height= rand+'px';
于 2013-03-09T09:11:43.450 回答
0

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

于 2013-03-09T09:12:01.623 回答