Получение элемента по идентификатору каждый раз, когда я прохожу через

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 вернет только один узел, даже если имеется несколько совпадений.

Вы можете сделать что-то вроде этого:

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"; 
}