js中元素的坐标

最新推荐文章于 2023-09-30 20:24:54 发布

SuperYuHuoFei

最新推荐文章于 2023-09-30 20:24:54 发布

阅读量2.9k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/SuperYuHuoFei/article/details/78160104

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

这篇文章很好：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.οnlοad=function () {
          let box=document.getElementsByClassName("draggable")[0];
          box.οnmοusedοwn=function (event) {
              let e=event||window.event;
              let distX=e.clientX-this.offsetLeft;
              let distY=e.clientY-this.offsetTop;

              document.οnmοusemοve=function (event) {
                  let e=event||window.event;

                  box.style.left=e.clientX-distX+'px';
                  box.style.top=e.clientY-distY+'px';
              };

              document.οnmοuseup=function(){
                  this.οnmοusemοve=null;
              }
          }

        };
    </script>
</head>
<body>
    <div class="draggable"></div>
</body>
</html>