我如何通过javascript DOM在多个应用样式

how can i apply style through javascript DOM in multiple <div> blocks

本文关键字：应用 样式 DOM 何通过 javascript      更新时间：2023-09-26
块。

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

我想在我的网页内随机创建52个<div>块。我没有得到想要的输出。HTML DOM不能工作。只有20个<div>块在工作。
这里我使用随机函数为每个单独的<div>设置不同的位置。期望的输出应该是52个不同颜色的块在不同的位置。但结果是不同的。只有块在输出。
我能换一种方式吗?

你有几个问题。首先，您的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>

应该可以工作.....我使代码非常非常简单....

编辑:添加随机运动…

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>

DOM没有问题。你的代码有问题。

你有一个空白id的div

你有一个div, id是一个数字(1)。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>

//--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);
}
相关文章：