原生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>

 

posted @ 2020-05-30 18:49  全情海洋  阅读(683)  评论(0)  编辑  收藏  举报