Как изменить цвет и ширину div?

Я хочу, чтобы для div различался цвет и ширина, заданные с помощью двух массивов, и в цикле for, но я не могу найти, как это сделать. Поэтому у меня есть 5-divs, которые должны иметь разный цвет и разную ширину.Как изменить цвет и ширину 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";

и добавить свой код Js как раз перед закрытием тега тела Demo :: 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

Попробуйте этот код:

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

Demo: 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?

ответ

Смежные вопросы