javascript - 每次循环通过 id 获取一个元素

Question

所以我的问题是，每当我运行这个循环时，它只会在第一次翻转时抓取元素的更改。有没有办法让它每次都做出这些改变？

<script>
for ( i=0; i<5; i++){
    document.write('<div id=\"blah\" >text</div>');
    var b = document.getElementById("blah"); 
    b.style.width ="200px";      
    b.style.backgroundColor="yellow";
}
</script>

Answer 1

id在文档中必须是唯一的。因此问题。即使有多个匹配项，DOM 也只会返回 1 个节点。

你可以这样做：

for (var i=0; i<5; i++){
    var div = '<div class="blah" >text</div>';
    div.style.width ="200px";
    div.style.backgroundColor="yellow";
    document.write(div);
}

Answer 2

我有两个想法来克服这个问题。首先是创建元素，更改其样式并附加它。

<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        var div = document.createElement("div");
        div.style.width = "200px";
        div.style.backgroundColor = "yellow";
        document.appendChild(div);
    }
</script>

另一个想法是您不需要对 DOM 元素的引用，因为您只是在更改样式，因此您可以使用 CSS 应用样式。例如：

<style type="text/css">
    div.something {
        width: 200px;
        background-color: yellow;
    }
</style>

<script type="text/javascript">
    for (var i = 0; i < 5; i++) {
        document.write("<div class='something'>text</div>");
        // Or use the createElement/appendChild approach from above,
        //  where you'd need to set the div.className property as "something"
    }
</script>

Answer 3

您需要将元素添加到 DOM 以便以后能够访问它。

for(var i=0;i<5;i++)
{
  //I'm not sure if you are just trying to make these changes each iteration
  //or create a new element each time. If you are trying to create a new element
  //each time. I'd def consider going a diff route i.e. use classes.
  var b;
  if( i==0 ){
    b = document.createElement("DIV"); 
    b.id = "blah";}
  else{
    b = document.getElementById("blah");}

  b.style.width ="200px";      
  b.style.backgroundColor="yellow";
}