js获取dom元素宽高的几种方法
作者：Eric Coper
这篇文章主要给大家介绍了关于js获取dom元素宽高的几种方法,文中通过示例代码介绍的非常详细,对大家学习或者使用js具有一定的参考学习价值,需要的朋友可以参考下
① dom.style.width / height
这种⽅法，有⼀定局限性，只能取内联样式的宽⾼。
<div id="id" style="height: 100px"></div>
<script>
var d = document.getElementById('id').style.height
console.log(d)
</script>② dom.currentStyle.width / height
这种⽅法，也是有⼀定局限性，不过我们三种常⽤css样式都能获取。但是只⽀持 IE ，其它浏览器不⽀持
③ window.getComputedStyle(dom).width / height
var d = document.getElementById('id')
console.log( window.getComputedStyle(d).height)⽀持所有浏览器，兼容性好
④ dom.getBoundingClientRect().width / height
这种⽅法，⼀般⽤于计算元素的绝对位置，根据视窗左上⻆的点来算的。可以拿到四个元素值： left 、 top 、 width 、 height
<style>
#id{
height: 100px;
width: 100px;
margin-left: 20px;
margin-top: 20px;
}
</style>
<body>
<div id="id"></div>
<script>
// 只支持内联样式
// var d = document.getElementById('id').style.height
// console.log(d)
//都支持，兼容性好
// var d = document.getElementById('id')
// console.log( window.getComputedStyle(d).height)
var d = document.getElementById('id')
console.log(d.getBoundingClientRect())
</script>
</body>
总结
到此这篇关于js获取dom元素宽高的几种方法的文章就介绍到这了,更多相关js获取dom元素宽高内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！