如何更改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的颜色和宽度？

回答

相关问题