原生JS中获取位置的方案总结
Posted fsg6
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生JS中获取位置的方案总结相关的知识，希望对你有一定的参考价值。
-
获取鼠标当前位置
- clientY、clientX： 鼠标当前位置 相对于
浏览器可视区域顶部、浏览器可视区域左部的位置； - pageY、pageX： 鼠标当前位置 相对于
文档顶部、文档左部的位置； - screenY、screenX：鼠标当前位置 相对于
屏幕顶部、屏幕左部的位置； - offsetY、offsetY：鼠标的当前位置 相对于
目标节点的内填充边顶部、内填充边左部的位置。内填充边意思是不包含border，但包含padding，类似于padding-box。 - 他们均是鼠标事件的一级属性 ，如e.clientY
- clientY、clientX： 鼠标当前位置 相对于
-
获取某一元素的区域
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中获取位置的方案总结的主要内容，如果未能解决你的问题，请参考以下文章