原生JS中获取位置的方案总结

 

    • 获取鼠标当前位置

      • clientY、clientX: 鼠标当前位置 相对于 浏览器可视区域顶部、浏览器可视区域左部 的位置;
      • pageY、pageX: 鼠标当前位置 相对于 文档顶部、文档左部的位置;
      • screenY、screenX:鼠标当前位置 相对于 屏幕顶部、屏幕左部的位置;
      • offsetY、offsetY:鼠标的当前位置 相对于 目标节点内填充边顶部、内填充边左部的位置。内填充边意思是不包含border,但包含padding,类似于padding-box。
      • 他们均是鼠标事件的一级属性 ,如e.clientY
    • 获取某一元素的区域

      Element.getBoundingClientRect()   相对于视口的位置  OBJ.getBoundingClientRect().left
      
    • 1.该方法获取的是该元素相对于

视口的位置

    top、bottom、left、right:分别是该元素的元素框(盒模型)上下左右位置距视口的距离。
      2.其中,top和bottom是距

视口上边界

      的距离,left和right是距

视口左边界

    的距离。
      3.width、height:分别是该元素的元素框(盒模型)的宽度和高度,这个宽高是border以内并且包含border,类似于

border-box

    以下三种方法获取元素的位置,是相对于其包含块的
                第一种;obj.style.left和obj.style.top,
                1.有局限性,这种获取的方法只能获取到行内样式的left和top的属性值,不能获取到style标签和link 外部引用的left和top属性值。
                第二种;window.getComputedStyle(obj, null).left
                1.只读,可以获取所有style样式
                2.存在兼容性问题,在IE浏览器上则是采用obj.currentStyle.left方法来获取属性值。
                第三种;使用 obj.offsetLeft来获取对象的left属性
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;padding: 0;
 9         }
10         #boxs{
11             width: 200px;height: 200px;border: 1px solid red;position: absolute;top: 0;left:10px;
12         }
13     </style>
14 </head>
15 <body>
16     <div id="boxs">这是一个盒子</div>
17     <div id="ctns" style="width: 500px;height: 300px;border: 1px solid blue;position: absolute;top: 210px;left:20px;">这是第二个</div>
18 </body>
19 <script type="text/javascript">
20     // 1,第一种方法 obj.style.left 只能获取行内样式的left值
21     var boxs = document.getElementById(boxs);
22     var ctns = document.getElementById(ctns);
23     var a = boxs.style.left;
24     console.log(a);    //值是空,没有
25  
26     var a2 = ctns.style.left;
27     console.log(a2);    //值是20px
28  
29     // 2,第二种方法,获取所有类型样式值,要写兼容
30     //支持w3c规范的浏览器
31     var b2= window.getComputedStyle(boxs).left;
32     console.log(b2);    //10px
33     //兼容IE9以下写法
34     var b3 = window.getComputedStyle? window.getComputedStyle(boxs).left : boxs.currentStyle.left;
35     console.log(b3);    //10px
36  
37     // 3,第三种方法 使用obj.offsetLeft
38     var c = boxs.offsetLeft;
39     var c2 = ctns.offsetLeft;
40     console.log(c);        //值是10
41     console.log(c2);    //值是20
42  
43 </script>
44 </html>

 

原生JS中获取位置的方案总结

上一篇:css文字颜色渐变的3种实现


下一篇:2021-08-02