javascript - 如何在JS中增加div的top属性？

This question already has answers here:

How to retrieve the display property of a DOM element?

                                    （4个答案）


                                5个月前关闭。


我需要增加div的top属性值。由于某种原因，它不起作用。

我试图使用obj.style.top并增加值，但它不起作用。

let sqr = document.getElementById("sqr")
let val = parseInt(sqr.style.top)
sqr.style.top = (val + 100) + "px";

body {
  width: 100vw;
  height: 100vh;
  position: relative;
}

#sqr {
  height: 30px;
  width: 30px;
  background-color: blue;
  position: absolute;
  top: 100px;
  left: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Document</title>
  <link rel="stylesheet" href="index2.css" />
</head>

<body>
  <div id="sqr"></div>
  <script src="index2.js"></script>
</body>

</html>

我只希望正方形向上移动约100像素。
谢谢。

最佳答案

采用

sqr.style.top= (sqr.offsetTop + 100) + "px";

style.top返回html标记的style属性中设置的最高值。