原生JS中获取位置的方案总结
2021-02-14 10:16
标签：bsp tns back 兼容 元素 prism class border 宽度 获取鼠标当前位置 获取某一元素的区域 原生JS中获取位置的方案总结 标签：bsp tns back 兼容 元素 prism class border 宽度 原文地址：https://www.cnblogs.com/fsg6/p/12994283.html
浏览器可视区域顶部、浏览器可视区域左部 的位置；文档顶部、文档左部的位置；屏幕顶部、屏幕左部的位置；目标节点的内填充边顶部、内填充边左部的位置。内填充边意思是不包含border，但包含padding，类似于padding-box。Element.getBoundingClientRect() 相对于视口的位置 OBJ.getBoundingClientRect().left
视口的位置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>Documenttitle>
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>
下一篇：Apache+SVN部署