使用 html ,css, js 使元素落到页面上

Question

我想让网格元素落到页面上。我使用 setInterval 来重复这个过程（底部会降低，所以网格会下降）。我想我没有创建 move() 函数 correctly.I 只是想知道如何正确设置该函数。

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

Answer 1

我建议您为此使用 CSS animation，您不需要 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>

Answer 2

如果您仍想实施您的方法来实现此运动，请在此处提供一些反馈。

底部值为字符串，不是数字（例如 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 is read-only, and should be used to inspect the element's style — including those set by a element or an external stylesheet

在下面的代码片段中，您可以查看并比较值 grid.style.bottom 和 window.getComputedStyle(grid)。起初，第一个版本是空的，但第二个版本具有样式表中的预期值。

或者，您可以直接将样式 in-line 应用于 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>

使用 html ,css, js 使元素落到页面上

Make an element falling down to the page using html ,css, js

html

javascript

css

setinterval

底部值为字符串，不是数字（例如 300px 与 300）

document.getElementById(...).style 缺少来自 `<style>` 块和样式表的样式

使用 html ,css, js 使元素落到页面上

Make an element falling down to the page using html ,css, js

html

javascript

css

setinterval

底部值为字符串，不是数字（例如 300px 与 300）

document.getElementById(...).style 缺少来自 <style> 块和样式表的样式

document.getElementById(...).style 缺少来自 `<style>` 块和样式表的样式