Question

我希望div通过两个数组和for循环指定不同的颜色和宽度但是我找不到如何完成这个。所以我有5个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>

Answer 1

从以下位置更改for循环：

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

并在关闭body标签之前添加你的js代码演示:: jsFiddle

Answer 2

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

Answer 3

试试这段代码：

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

Answer 4

你可以使用每个jquery

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

Answer 5

为什么不使用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/

Answer 6

 <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>

如何更改div的颜色和宽度？

6 个答案: