js中元素的坐标

来源：互联网发布：挪威三文鱼事件知乎编辑：程序博客网时间：2024/06/06 19:56

这篇文章很好：JS精准定位参数

总结并扩展一下：

1. 事件对象的offsetX和offsetY只在IE中有，更常用的方法是：e.clientX-ele.offsetLeft；

2. 事件对象没有宽高，只有坐标（定位），只是坐标的起算点不一样：

clientX(Y) 相对于浏览器可视区左（上）

pageX(Y) 页面文档左（上）

screenX(Y) 屏幕左（上）

offsetX(Y) 目标元素左（上）边框

3.元素对象既有宽高，又有坐标

3.1 获取元素可视区（content+padding）宽高：clientWidth、clientHeight；注意：如果元素是浏览器窗口（即window对象），考虑兼容性，其宽度可以用如下方式返回：

return window.innerWidth || window.document.documentElement.clientWidth || window.document.body.clientWidth; 高度类似。

3.2 获取包括边框在内的宽高（border+content+padding）：offsetWidth、offsetHeight

3.3 元素定位： offsetLeft、offsetTop

对于滚动的元素：

scrollWidth(Height)：滚动元素内容的宽高

scrollTop(Left)：向上（左）滚动的像素数（垂直（水平）滚动条的位置）

普通元素是没有这类属性的，只有有scroll事件的元素才有，最常见的即是window对象

如果是window对象，考虑兼容性，垂直滚动条位置可以写做：

return window.pageXOffset || window.document.documentElement.scrollTop|| window.document.body.scrollTop; 水平滚动条位置类似。

例一：小球碰壁

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #wrap{ width:400px;height:400px;border:1px red solid;position:relative;margin:100px auto;}        #ball{width:40px;height:50px;background-color:yellow;position:absolute;top:80px;left:130px;border-radius: 50%}    </style></head><body>    <div id="wrap">        <div id="ball"></div>    </div></body><script type="text/javascript">    var spd=6; // 初始速度大小    var theta=60; // 初始速度方向    //获取节点    var wrap=document.getElementById("wrap");    var ball=document.getElementById("ball");    //设置小球运动速度    var speedX=spd*Math.cos(theta);    var speedY=spd*Math.sin(theta);    //添加计时器    setInterval(function(){        //获取小球到父级的距离        var posX=ball.offsetLeft;        var posY=ball.offsetTop;        //判断小球运动的临界值        if(posX<0||posX>=wrap.clientWidth-ball.offsetWidth){            speedX = -speedX;//当小球碰到壁是左右，水平速度反向        }        if(posY<0||posY>=wrap.clientHeight-ball.offsetHeight){            speedY = -speedY;//当小球碰到壁是上下，竖直速度反向        }        //赋值        posX += speedX;        posY +=speedY;        ball.style.left= posX+"px"; // 一定不能忘加"px"！        ball.style.top=posY+"px";    },16);   </script></html>

例二：元素拖拽

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>拖拽</title>    <style>        .draggable{            width: 200px;            height: 200px;            background: gray;            position: absolute;            top: 0;            left: 0;        }    </style>    <script>        window.onload=function () {          let box=document.getElementsByClassName("draggable")[0];          box.onmousedown=function (event) {              let e=event||window.event;              let distX=e.clientX-this.offsetLeft;              let distY=e.clientY-this.offsetTop;              document.onmousemove=function (event) {                  let e=event||window.event;                  box.style.left=e.clientX-distX+'px';                  box.style.top=e.clientY-distY+'px';              };              document.onmouseup=function(){                  this.onmousemove=null;              }          }        };    </script></head><body>    <div class="draggable"></div></body></html>

阅读全文

0 0