Question

所以我正在学习红色和白色圆圈https://www.youtube.com/watch?v=xW-58hkF6pA的一些javascript动画，它可以工作，但是代码很长，可以制作一个div数组并以循环的方式对其应用更改

var circles=[
        document.querySelector("#circle1"),
        document.querySelector("#circle2"),
        document.querySelector("#circle3"),
        document.querySelector("#circle4"),
        document.querySelector("#circle5"),
        document.querySelector("#circle6"),
    ];

function zoom(){

        for(var i=1;i<=6;i++){
        circles[i].style.width=circles[i].clientHeight+4+"px";
        circles[i].style.height=circles[i].clientHeight+4+"px";
        }  
  /*here conditions and stuffs*/
     requestAnimationFrame(zoom)
    }
    zoom()

这是控制台上的结果：

  Uncaught TypeError: Cannot read property 'style' of undefined

 console.log(circles[0]);/*result <div class="circle" id="circle1" > 
 </div> and selects the div in the page /*

即使这样也不起作用

    function zoom(){

        for(var i=1;i<=6;i++){
            clientH=circles[0].clientHeight+4+"px;"

     circles[i].setAttribute("style","width="+clientH+"height="+clientH);
        }  
     /*here conditions and stuffs*/
     requestAnimationFrame(zoom)
    }
    zoom()

ps：如果我使用querySelecor（'＃circle'+ i）.style.width = etc效果很好，那么循环就可以了

Answer 1

问题出在您的循环条件上。您在上一次迭代中超出了范围。这是一种更安全的方法，您可以从零（数组中的第一个元素）开始，到最后一个元素结束。

for (var i = 0; i < circles.length; i++) { ... }

var circles = [
  document.querySelector("#circle1"),
  document.querySelector("#circle2"),
  document.querySelector("#circle3"),
  document.querySelector("#circle4"),
  document.querySelector("#circle5"),
  document.querySelector("#circle6"),
];

for (var i = 0; i < circles.length; i++) {
  circles[i].style.width = circles[i].clientHeight + 4 + "px";
  circles[i].style.height = circles[i].clientHeight + 4 + "px";
}

div[id] {
  background: red;
  border-radius: 50%;
  display: block;
  margin-bottom: 1rem;
}

<div id="circle1"></div>
<div id="circle2"></div>
<div id="circle3"></div>
<div id="circle4"></div>
<div id="circle5"></div>
<div id="circle6"></div>

http://jsfiddle.net/eycsdfp9/

Answer 2

我建议使用此方法

在此示例中像data-attribute一样添加data-name，并在data-attribute的基础上应用CSS，这样就不必在另一个文档模型中出现CSS冲突。

var circles = [
  document.querySelector("#circle1"),
  document.querySelector("#circle2"),
  document.querySelector("#circle3"),
  document.querySelector("#circle4"),
  document.querySelector("#circle5"),
  document.querySelector("#circle6"),
];

for (var i = 0; i < circles.length; i++) {
  circles[i].style.width = circles[i].clientHeight + 4 + "px";
  circles[i].style.height = circles[i].clientHeight + 4 + "px";
}

div[data-name="circle"] {
  background: red;
  border-radius: 50%;
  display: block;
  margin-bottom: 1rem;
}
div[data-name="user"]{
background-color:yellow;
color:black;
font-size:18px;
}

<div data-name="user" id="user1">Sushil</div>
<div data-name="circle" id="circle1">one</div>
<div data-name="circle" id="circle2">two</div>
<div data-name="circle" id="circle3">three</div>
<div data-name="circle" id="circle4">four</div>
<div data-name="circle" id="circle5">five</div>
<div data-name="circle" id="circle6">six</div>

可以访问作为数组项的div的style属性

2 个答案: