如何更改div的顏色和寬度？

我想通過兩個數組和for循環指定不同顏色和寬度的div，但我無法找到如何完成此操作。所以我有5個div，都應該有不同的顏色和一個單獨的寬度。如何更改div的顏色和寬度？

有人在這裏有任何經驗，可以幫助我嗎？謝謝。

<html> 
    <head> 
     <title>Hoi</title> 
    <script type="text/javascript"> 

     var color = Array("#F00","#FF0","#0F0","#0FF","#00F"); 
     var width = Array("20", "40", "60", "80", "100"); 

     { 
      for (i=0; i<5; i++) 
      { 
       document.getElementById('div'+i).style.backgroundColor = color[i]; 
       document.getElementById('div'+i).style.width = width[i]; 
      } 
     } 

     </script> 
    </head> 
    <body> 
     <div id="div1">div1</div> 
     <div id="div2">div2</div> 
     <div id="div3">div3</div> 
     <div id="div4">div4</div> 
     <div id="div5">div5</div> 
    </body> 
</html>

來源

2014-01-20 user3044919

也許這有助於http://stackoverflow.com/questions/5915096/get-random-item-from -javascript-array – caramba

改變你的循環來源：

for (i=0; i<5; i++) { 
    document.getElementById('div'+i).style.backgroundColor = color[i]; 
    document.getElementById('div'+i).style.width = width[i];

到

for (i=1; i <= 5; i++) { 
    document.getElementById('div'+i).style.backgroundColor = color[i-1]; 
    document.getElementById('div'+i).style.width = width[i-1] + "px";

和變化：

document.getElementById('div'+i).style.width = width[i];

到

document.getElementById('div'+i).style.width = width[i-1] + "px";

，只是身體標記的收盤演示:: jsFiddle

來源

2014-01-20 10:18:49

然後'width [i]'應該是'width [i - 1]' –

你是對的.. :) –

-1

<html> 
    <head> 
     <title>Hoi</title> 

    </head> 
    <body> 
     <div id="div1">div1</div> 
     <div id="div2">div2</div> 
     <div id="div3">div3</div> 
     <div id="div4">div4</div> 
     <div id="div5">div5</div> 
    </body> 
    <script type="text/javascript"> 

     var color = Array("#F00","#FF0","#0F0","#0FF","#00F"); 
     var width = Array("20px", "40px", "60px", "80px", "100px"); 

     { 
      for (i=1; i<5; i++) 
      { 

       var strId = "div" + i; 
       alert(strId); 
       document.getElementById(strId).style.background = color[i]; 
       document.getElementById(strId).style.width = width[i]; 
      } 
     } 

     </script> 
</html>

來源

2014-01-20 10:22:18

http://jsfiddle.net/uQnsr/1/

var color = new Array("#F00", "#FF0", "#0F0", "#0FF", "#00F"); 
var width = new Array("20", "40", "60", "80", "100"); 

for (i = 1; i < 6; i++) { 
    document.getElementById('div' + i).style.backgroundColor = color[i]; 
    document.getElementById('div' + i).style.width = width[i] + 'px'; 
}

來源

2014-01-20 10:22:39 CRABOLO

試試這個代碼前加上您的JS代碼：

var color = Array("#F00", "#FF0", "#0F0", "#0FF", "#00F"); 
var width = Array("20", "40", "60", "80", "100");  
for (var i=0; i<5; i++) 
{  
    document.getElementById('div'+(i+1)).style.backgroundColor = color[i]; 
    document.getElementById('div'+(i+1)).style.width = width[i] + "px"; 
}

演示：Fiddle

來源

2014-01-20 10:24:26 Manoj

，你可以使用jQuery每個

$('div[id*=div]').each(function(index,value)

來源

2014-01-20 10:29:36

你能爲我添加一個小提琴演示嗎？ –

你爲什麼不使用JQuery。它更快，更快修復。

<title>Hoi</title> 

<body> 
     <div id="div1">div1</div> 
     <div id="div2">div2</div> 
     <div id="div3">div3</div> 
     <div id="div4">div4</div> 
     <div id="div5">div5</div> 
</body>

這裏是你的JS代碼：

$(document).ready(function(){ 

var color = Array("#F00","#FF0","#0F0","#0FF","#00F"); 
var width = Array("20", "40", "60", "80", "100"); 

      for (i=1; i<6; i++) 
      { 
       $("#div" + i).css("background-color", color[i-1]); 
       $("#div" + i).css("width",width[i-1]);         
      } 
});

您可以檢查http://jsfiddle.net/C48nd/

來源

2014-01-20 10:49:18 Mahib

如何更改div的顏色和寬度？

回答

相關問題