每当我循环访问时，通过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"; 
}