问尽管对超文本标记语言进行了调整，但document.querySelectorAll不适用
EN

Stack Overflow用户

提问于 2021-11-17 19:58:40

回答 1查看 28关注 0票数 0

我正在尝试用document.querySelectorAll在一个div中获取所有的div。有趣的是，当我在JS中将高度设置为1000时，资源管理器的滚动条会相应地放大(只是气球不会变大)。我做错了什么？

'use strict';

var gElBalloons;

function init() {
  gElBalloons = document.querySelectorAll('.balloons');

  setInterval(moveBalloons, 1000);
}

function moveBalloons() {
  for (var i = 0; i < gElBalloons.length; i++) {
    gElBalloons[i].style.height = 1000 + 'px';
  }
}

body {
  margin: 10%;
}

.balloon-1 {
  display: block;
  width: 120px;
  height: 145px;
  background-color: red;
  border-radius: 80%;
  position: absolute;
}

.balloon-2 {
  display: block;
  width: 120px;
  height: 145px;
  background-color: blue;
  border-radius: 80%;
  left: 40%;
  position: absolute;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Balloons</title>
  <link rel="stylesheet" href="./css/main.css" />
</head>

<body onload="init()">
  <div class="balloons">
    <div class="balloon-1"></div>

    <div class="balloon-2"></div>
  </div>
  <script src="./js/main.js"></script>
</body>

</html>

现在，我只想测试并确保它工作正常。

javascript

queryselector

回答 1

Stack Overflow用户

发布于 2021-11-18 01:43:50

您的选择器似乎选择了错误的div。如果你想让球更大，你应该选择balloon-1和balloon-2，而不是它们的容器balloons。

'use strict';

var gElBalloons;

function init() {
  gElBalloons = document.querySelectorAll('.balloons > div');

  setInterval(moveBalloons, 1000);
}

function moveBalloons() {
  for (var i = 0; i < gElBalloons.length; i++) {
    gElBalloons[i].style.height = 1000 + 'px';
  }
}

body {
  margin: 10%;
}

.balloon-1 {
  display: block;
  width: 120px;
  height: 145px;
  background-color: red;
  border-radius: 80%;
  position: absolute;
}

.balloon-2 {
  display: block;
  width: 120px;
  height: 145px;
  background-color: blue;
  border-radius: 80%;
  left: 40%;
  position: absolute;
}

<!DOCTYPE html>

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Balloons</title>

</head>

<body onload="init()">
  <div class="balloons">
    <div class="balloon-1"></div>

    <div class="balloon-2"></div>
  </div>

</body>

</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70010788

复制

相似问题

问尽管对超文本标记语言进行了调整，但document.querySelectorAll不适用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尽管对超文本标记语言进行了调整，但document.querySelectorAll不适用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问尽管对超文本标记语言进行了调整，但document.querySelectorAll不适用
EN