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

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

javascript html css

Javascript 如何更改div的颜色和宽度？,javascript,html,css,Javascript,Html,Css,我希望通过两个数组和for循环为div指定不同的颜色和宽度，但我找不到如何实现这一点。所以我有5个div，它们都应该有不同的颜色和不同的宽度这里有没有人有这方面的经验，可以帮助我？谢谢 <html> <head> <title>Hoi</title> <script type="text/javascript"> var color = Array("#F00","#FF0",

我希望通过两个数组和

for

循环为div指定不同的颜色和宽度，但我找不到如何实现这一点。所以我有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>


海
变量颜色=数组（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=数组（“20”、“40”、“60”、“80”、“100”）；
{
对于（i=0；i将for循环更改为：
for (i=0; i<5; i++) {
  document.getElementById('div'+i).style.backgroundColor = color[i];
  document.getElementById('div'+i).style.width = width[i];

到
在关闭body标记之前添加js代码
演示：：
将for循环更改为：
for (i=0; i<5; i++) {
  document.getElementById('div'+i).style.backgroundColor = color[i];
  document.getElementById('div'+i).style.width = width[i];

到
在关闭body标记之前添加js代码
演示：：

海
第一组
第二组
第三组
第四组
第五组
变量颜色=数组（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=数组（“20px”、“40px”、“60px”、“80px”、“100px”）；
{
对于（i=1；i
海
第一组
第二组
第三组
第四组
第五组
变量颜色=数组（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=数组（“20px”、“40px”、“60px”、“80px”、“100px”）；
{
对于（i=1；i
var color=新数组（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=新数组（“20”、“40”、“60”、“80”、“100”）；
对于（i=1；i<6；i++）{
document.getElementById（'div'+i）.style.backgroundColor=color[i]；
document.getElementById（'div'+i）.style.width=width[i]+'px'；
}

var color=新数组（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=新数组（“20”、“40”、“60”、“80”、“100”）；
对于（i=1；i<6；i++）{
document.getElementById（'div'+i）.style.backgroundColor=color[i]；
document.getElementById（'div'+i）.style.width=width[i]+'px'；
}
尝试以下代码：
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";
}

var color=Array（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=数组（“20”、“40”、“60”、“80”、“100”）；
对于（var i=0；i请尝试以下代码：
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";
}

var color=Array（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=数组（“20”、“40”、“60”、“80”、“100”）；
对于（var i=0；i），可以分别使用jquery
$('div[id*=div]').each(function(index,value)

您可以使用jquery
$('div[id*=div]').each(function(index,value)

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

Hoi
第一组
第二组
第三组
第四组
第五组

以下是您的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]);                                
            }
});

$（文档）.ready（函数（）{
变量颜色=数组（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=数组（“20”、“40”、“60”、“80”、“100”）；
对于（i=1；i为什么不使用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>

Hoi
第一组
第二组
第三组
第四组
第五组

以下是您的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]);                                
            }
});

$（文档）.ready（函数（）{
变量颜色=数组（“#F00”、“#FF0”、“#0F0”、“#0FF”、“#00F”）；
变量宽度=数组（“20”、“40”、“60”、“80”、“100”）；
对于（i=1；i可能这有帮助也许这有帮助那么width[i]
应该是width[i-1]
那么width[i]
应该是width[i-1]
你能为我添加一个小提琴演示吗？你能为我添加一个小提琴演示吗？