如何在多个<div>块中通过javascript DOM应用样式

时间：2016-09-16 10:30:58

标签： javascript jquery html css

＆＃13;
＆＃13; 
<!DOCKTYPE html>
<html>
<head>
<style>
div
{
position:absolute;
width:100px;
height:100px;

-webkit-transition: 1s ease 0s;

}
div:hover
{
width:100px;
height:100px;
border-radius:100px;
-webkit-transform:matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}

    
}

</style>
</head>
<body  bgcolor="black" onload="bbbl()">

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div>
<div id="j"></div>
<div id="k"></div>
<div id="l"></div>
<div id="m"></div>
<div id="n"></div>
<div id="o"></div>
<div id="p"></div>
<div id="q"></div>
<div id="r"></div>
<div id=""></div>
<div id="t"></div>
<div id="u"></div>
<div id="v"></div>
<div id="w"></div>
<div id="x"></div>
<div id="y"></div>
<div id="z"></div>
<div id="1"></div>
<div id="ba"></div>
<div id="ca"></div>
<div id="da"></div>
<div id="ea"></div>
<div id="fa"></div>
<div id="ga"></div>
<div id="ha"></div>
<div id="ia"></div>
<div id="ja"></div>
<div id="ka"></div>
<div id="la"></div>
<div id="ma"></div>
<div id="na"></div>
<div id="oa"></div>
<div id="pa"></div>
<div id="qa"></div>
<div id="ra"></div>
<div id="sa"></div>
<div id="ta"></div>
<div id="ua"></div>
<div id="va"></div>
<div id="wa"></div>
<div id="xa"></div>
<div id="ya"></div>
<div id="za"></div>
<script>

var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green","navy","orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"];
var id = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z","1", "ba", "ca", "da", "ea", "fa", "ga", "ha", "ia", "ja", "ka", "la", "ma", "oa", "pa", "qa", "ra", "sa", "ta", "ua", "va", "wa", "xa", "ya", "za"];
var ran3=Math.floor(Math.random() * 1200);
 var ran4=Math.floor(Math.random() * 500);
function bbbl()
{

for(i=0;i<=51;i++)
{
 var ran=Math.floor(Math.random() * 1200);
 var ran1=Math.floor(Math.random() * 500);
document.getElementById(id[i]).style.backgroundColor=color[i];
document.getElementById(id[i]).style.left=ran+'px';
document.getElementById(id[i]).style.top=ran1+'px';
document.getElementById(id[i]).style.opacity="0.3";

}
}

</script>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我想在我的网页中随机创建52个<div>块。我没有得到理想的输出。 HTML DOM不起作用。只有20 <div>块正在运作 在这里，我使用随机函数为每个人<div>设置不同的位置。所需的输出应该是不同位置的52个不同颜色的块。但结果却不同。输出中只有块 我可以用不同的方式做到这一点吗？

4 个答案:

答案 0 :(得分：2)

你有一些问题。首先，您的HTML缺少#s元素。数组中也只有50个元素，因此循环到51包含会导致出界错误。您可以循环到id.length。

一个更好的方法是选择所有div元素（通过标记或类）并直接遍历它们，而不必维护所有id属性的单独列表。试试这个：

var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "navy", "orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"];

function bbbl() {
    var els = document.querySelectorAll('div');  
    els.forEach(function(el, i) {
      var ran = Math.floor(Math.random() * 1200);
      var ran1 = Math.floor(Math.random() * 500);
      el.style.backgroundColor = color[i];
      el.style.left = ran + 'px';
      el.style.top = ran1 + 'px';
      el.style.opacity = "0.3";
    });
}

bbbl();
div {
  position: absolute;
  width: 100px;
  height: 100px;
  -webkit-transition: 1s ease 0s;
}
div:hover {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}
body {
  background-color: black;
}
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div>
<div id="j"></div>
<div id="k"></div>
<div id="l"></div>
<div id="m"></div>
<div id="n"></div>
<div id="o"></div>
<div id="p"></div>
<div id="q"></div>
<div id="r"></div>
<div id="s"></div>
<div id="t"></div>
<div id="u"></div>
<div id="v"></div>
<div id="w"></div>
<div id="x"></div>
<div id="y"></div>
<div id="z"></div>
<div id="1"></div>
<div id="ba"></div>
<div id="ca"></div>
<div id="da"></div>
<div id="ea"></div>
<div id="fa"></div>
<div id="ga"></div>
<div id="ha"></div>
<div id="ia"></div>
<div id="ja"></div>
<div id="ka"></div>
<div id="la"></div>
<div id="ma"></div>
<div id="na"></div>
<div id="oa"></div>
<div id="pa"></div>
<div id="qa"></div>
<div id="ra"></div>
<div id="sa"></div>
<div id="ta"></div>
<div id="ua"></div>
<div id="va"></div>
<div id="wa"></div>
<div id="xa"></div>
<div id="ya"></div>
<div id="za"></div>

答案 1 :(得分：0)

DOM没有错。您的代码中存在问题。

您的div有一个空白ID

你有一个id为数字（1）的div。 ID不能是数字。

你的阵列缺少（n）和（na）。

var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green","navy","orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"];
var id = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z","aa", "ba", "ca", "da", "ea", "fa", "ga", "ha", "ia", "ja", "ka", "la", "ma", "oa", "na", "pa", "qa", "ra", "sa", "ta", "ua", "va", "wa", "xa", "ya", "za"];
var ran3=Math.floor(Math.random() * 1200);
var ran4=Math.floor(Math.random() * 500);
function bbbl()
{

for(i=0; i<=51; i++)
{
 var ran=Math.floor(Math.random() * 1200);
 var ran1=Math.floor(Math.random() * 500);
 var block = document.getElementById(id[i]);
block.style.backgroundColor=color[i];
block.style.left=ran+'px';
block.style.top=ran1+'px';
block.style.opacity="0.3";

}
}
div
{
position:absolute;
width:100px;
height:100px;

-webkit-transition: 1s ease 0s;

}
div:hover
{
width:100px;
height:100px;
border-radius:100px;
-webkit-transform:matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}
  
<body  bgcolor="black" onload="bbbl()">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
<div id="d"></div>
<div id="e"></div>
<div id="f"></div>
<div id="g"></div>
<div id="h"></div>
<div id="i"></div>
<div id="j"></div>
<div id="k"></div>
<div id="l"></div>
<div id="m"></div>
<div id="n"></div>
<div id="o"></div>
<div id="p"></div>
<div id="q"></div>
<div id="r"></div>
<div id="s"></div>
<div id="t"></div>
<div id="u"></div>
<div id="v"></div>
<div id="w"></div>
<div id="x"></div>
<div id="y"></div>
<div id="z"></div>
<div id="aa"></div>
<div id="ba"></div>
<div id="ca"></div>
<div id="da"></div>
<div id="ea"></div>
<div id="fa"></div>
<div id="ga"></div>
<div id="ha"></div>
<div id="ia"></div>
<div id="ja"></div>
<div id="ka"></div>
<div id="la"></div>
<div id="ma"></div>
<div id="na"></div>
<div id="oa"></div>
<div id="pa"></div>
<div id="qa"></div>
<div id="ra"></div>
<div id="sa"></div>
<div id="ta"></div>
<div id="ua"></div>
<div id="va"></div>
<div id="wa"></div>
<div id="xa"></div>
<div id="ya"></div>
<div id="za"></div>

答案 2 :(得分：0)

这应该可行.....我使代码真的很简单....

编辑：添加随机动作.. 

var color = ["orange", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "white", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "navy", "orange", "white", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "pink", "red", "green", "blue", "white", "red"];

function getRandom(max) {
  return Math.random() * (max - 0) + 0;
}

function moveRandom(){
    var box = document.getElementsByClassName('box')
    for (var i = 0; i < box.length; i++) {
      box[i].style.left = (getRandom(window.innerWidth) -100) + 'px';
      box[i].style.top = (getRandom(window.innerHeight)  -100) + 'px';
    }
}

function bbbl() {

  for (i = 0; i <= 51; i++) {
    var el = document.createElement('div')
    el.classList.add('box')
    el.style.backgroundColor = color[i];
    el.style.opacity = "0.3";
    document.body.insertBefore(el, document.body.childNodes[0])
    moveRandom()
  }
}

bbbl()
setInterval(moveRandom, 5000)
<!DOCKTYPE html>
<html>

<head>
  <style>
    .box {
      position: absolute;
      width: 100px;
      height: 100px;
      -webkit-transition: 1s ease 0s;
    }
    .box:hover {
      width: 100px;
      height: 100px;
      border-radius: 100px;
      -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
    }
  }
  </style>
</head>

<body bgcolor="black" onload="bbbl()">

</body>

</html>

答案 3 :(得分：0)

//--try using class instead of id block.

//example

.mydiv
{
position:absolute;
width:100px;
height:100px;

-webkit-transition: 1s ease 0s;

}
.mydiv:hover
{
width:100px;
height:100px;
border-radius:100px;
-webkit-transform:matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
}
相关问题
最新问题