-
获取鼠标当前位置
- 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>