js获取元素相对于浏览器的位置,javascript设置和获取元素的样式
在之前的文章《JS数组学习之清空全部元素的4种方法（代码详解）》中，我们介绍了JS中清除数组和删除数组所有元素的四种方法。这次我们来介绍一下用js计算元素位置的方法。如有需要，请参考。
在javascript中，元素的位置可以分为两种：一种是相对于浏览器窗口的绝对位置；另一个是相对于父节点或主体元素的偏移位置。我们来看看如何得到两个元素的位置。
1、js计算相对于浏览器视窗的元素绝对位置
！声明文档类型
超文本标记语言
头
meta charset=utf-8
获取元素/标题的绝对位置
风格
*{
边距：0；
填充：0；
}
# div1 {宽度：100px高度：100px边框：3px纯红；}
# div 2 { width:70px；高度：70px边框：3px纯蓝；位置：相对；}
# div 3 { width:50px；高度：50px边框：3px纯绿；位置：绝对；
左：20pxtop:10px；}
/风格
/头
身体
div id=div1
div id=div2
div id=div3/div
/div
/div
脚本
var div 3=document . getelementbyid( div 3 )；
div3.getBoundingClientRect()。底部“px”；
console . log( div 3元素左外边框到浏览器窗口的距离为：)；
console . log(div 3 . getboundingclientrect()。左)；
console . log( div 3元素的右外边框到浏览器窗口的距离为：)；
console . log(div 3 . getboundingclientrect()。对)；
console . log( div 3元素的上下边框与浏览器窗口的距离为：)；
console . log(div 3 . getboundingclientrect()。顶)；
console . log( div 3元素的下外边框到浏览器窗口的距离为)；
console . log(div 3 . getboundingclientrect()。底部)；
/脚本
/body
/html分析：(前提，body节点的默认内外边距已被移除)
元素div3的左外边框到浏览器窗口的距离为：left(20)DIV 3的左边框宽度(DIV 1的左边框宽度(3)=26。
div3元素右外边框到浏览器窗口的距离为：div3元素左外边框到浏览器窗口的距离(26)div 3左边框的宽度(3)div 3的内容宽度(50)div 3右边框的宽度(3)=26 3 50 3=82。
DIV元素的上下边框与浏览器窗口的距离为：div1和div2的左边框宽度(3 ^ 3)DIV 3的上限值(10)=6 ^ 10=16。
div3元素下外边框到浏览器窗口的距离为：div3元素上外边框到浏览器窗口的距离(16)div 3上边框的宽度(3)div 3的内容宽度(50)div 3下边框的宽度(3)=16 3 50 3=72。
让我们看看输出是否是这样的：
在这段代码中，引入了两个重要的方法：getElementById()和getBoundingClient()。
getElementById()方法可以根据指定的Id值获取元素对象(该方法可以返回对具有指定id的第一个对象的引用)
element对象的getBoundingClient()方法可以获取元素相对于浏览器窗口的位置，它会返回一个Object对象，有六个属性：上、左、右、下、宽、高：
对象；getboundingClient()；top可以返回元素上下边框与浏览器窗口上边框之间的距离；
对象；getboundingClient()；left可以返回从元素的左外边框到浏览器窗口左边框的距离；
对象；getboundingClient()；right可以返回从元素的右外边框到浏览器窗口左边框的距离；
对象；getboundingClient()；bottom可以返回元素的下外部边框和浏览器窗口的上边框之间的距离；
物体。getBoundingClient()。width可以返回元素的宽度，包括左右边框的宽度；
物体。getboundingClient()。height可以返回元素的高度，包括上下边框的宽度。
2、计算相对于父节点或 body 元素的偏移位置
！声明文档类型
超文本标记语言
头
meta charset=utf-8
获取元素的偏移位置/标题。
风格
*{
边距：0；
填充：0；
}
# div1 {宽度：100px高度：100px边框：3px纯红；}
# div 2 { width:70px；高度：70px边框：3px纯蓝；位置：相对；}
# div 3 { width:50px；高度：50px边框：3px纯绿；位置：绝对；左：20px
top:10px；}
# div 4 { width:30px；高度：30px边框：3px实心橄榄；位置：绝对；左：20px
top:10px；}
/风格
/头
身体
div id=div1
div id=div2
div id=div3
分区id=div4 分区
/div
/div
/divbr /br /br /br /
div id=content/div
脚本
var div 2=document . getelementbyid( div 2 )；
var div 4=document . getelementbyid( div 4 )；
console . log( div 2 的水平偏移位置为：)；
console . log(div 2 . offset left)；
console . log( div 4 的水平偏移位置为：)；
console . log(div 4 . offset left)；
console . log( div 2 的垂直偏移位置为：)；
console . log(div 2 . offsettop)；
console . log( div 4 的垂直偏移位置为：)；
console . log(div 4 . offsettop)；
/脚本
/body
/html分析：(前提，body节点的默认内外边距已被移除)
Div2没有父节点，所以它的偏移量是相对于body节点的，所以水平和垂直的偏移量位置是div1的边框宽度(3px)等于3px。
div4最近的父节点是div3，水平偏移位置是div3的左属性值(20px)，垂直偏移位置是div3的顶属性值(10px)。
让我们看看输出是否是这样的：
通过上面的例子，我们了解了两个属性：offsetLeft和offsetTop。
OffsetLeft和offsetTop属性可以分别获取元素相对于父元素或主体元素的水平和垂直偏移位置。
【推荐学习：javascript高级教程】以上是如何使用js计算元素位置的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。