document.getElementById(…(.style未命中
我想让网格元素落到页面上。我用setInterval来重复这个过程(底部会减少，所以网格会下降(。我想我没有正确创建move((函数。我只是想知道如何正确设置函数。
!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>Document</title>
<link rel= "stylesheet" href ="style.css"></link>
</head>
<body>
<div class="grid"></div>
<script src="javascript.js" ></script>
</body>
</html>
.grid {
background-color:blue;
height: 20px;
width :100px;
left:600px;
top:150px;
position : absolute;
}
var grid =document.querySelector('.grid');
function move () {
grid.style.bottom-=4;
grid.style.bottom=grid.bottom +'px';
}
move();
setInterval(move,30);
我建议您使用CSS动画，您不需要JavaScript。
.grid {
background-color: blue;
height: 20px;
width: 100px;
left: 100px;
position: absolute;
animation: move 1.5s forwards;
}
@keyframes move {
from {
bottom: 200px;
}
to {
bottom: 0;
}
}<body>
<div class="grid"></div>
</body>如果你仍然想实现你的方法来实现这一运动，这里有一些反馈。
底部值是字符串，而不是数字(例如300px与300(
如果你想操作一个元素的底部值，你必须首先解析数值，然后更改它，然后附加一个"px"(或者你使用的任何单位(。
// grid.style.bottom-=4; // subtraction on strings is not allowed
// instead, use:
const currentBottom = parseInt(grid.style.bottom, 10)
grid.style.bottom = (currentBottom - 4) + 'px'
document.getElementById(…(.style未命中<style>块和样式表中的样式
如果你想获得DOM元素的所有当前样式，你应该使用window.getComputedStyle
getComputedStyle是只读的，应该用于检查元素的样式，包括由元素或外部样式表设置的样式
在下面的代码段中，您可以看到并比较值grid.style.bottom和window.getComputedStyle(grid)。起初，第一个版本是空的，但第二个版本具有样式表中的预期值。
或者，您可以直接在HTML元素中应用样式。然后，您也可以使用.style从一开始就访问正确的值。
<div class="grid" style="bottom: 100px"></div>
为了更好地理解，请查看以下片段的固定版本，延迟3秒。
var grid = document.querySelector('.grid');
function move() {
const style = grid.style.bottom
const computedStyle = window.getComputedStyle(grid)
console.log('bottom', style)
console.log('bottom from computed style', computedStyle.bottom)
// grid.style.bottom -= 4;
// grid.style.bottom = grid.bottom + 'px';
const newBottom = parseInt(computedStyle.bottom, 10) - 4; // parseInt only reads the numeric value from the bottom string
grid.style.bottom = newBottom + 'px';
}
move();
setInterval(move, 3000);.grid {
background-color: blue;
height: 20px;
width: 100px;
left: 100px;
bottom: 200px;
position: absolute;
}<div class="grid"></div>