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