移动元素的条件 · js技术点

```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动元素</title> <style type="text/css"> pre { font-size: 16px; font-weight: 700; margin-top: 255px; } * { margin: 0; padding: 0; } input { margin-top: 20px; } input:hover { cursor: pointer; } div { margin-top: 30px; width: 200px; height: 200px; position: absolute; /* 要移动div，必须是absolute才不会影响其他元素的布局 */ background-color: green; } </style> </head> <body> <input type="button" value="移动400px" id="btn1"> <div id="dv"></div> <pre> div要移动必须要脱离文档流：position: absolute; element.offsetHeight 返回元素的高度。 element.offsetWidth 返回元素的宽度。 element.offsetLeft 返回元素的水平偏移位置。 element.offsetParent 返回元素的偏移容器。 element.offsetTop 返回元素的垂直偏移位置。 </pre> <script type="text/javascript"> var div = document.getElementById("dv"); document.getElementById("btn1").onclick = function(){ var timeId = setInterval(function(){ var current = div.offsetLeft; // 数字类型，没有px var step = 9; // 每次移动像素 current += step; if(current<=400) { div.style.left = current+"px"; }else { clearInterval(timeId); } }, 20); } </script> </body> </html> ```