ie9以下浏览器不兼容getBoundingClientRect().width的解决办法

最新推荐文章于 2024-08-12 15:18:18 发布

原创最新推荐文章于 2024-08-12 15:18:18 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#getBoundingClientRect

IE8样式兼容性专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何使用getBoundingClientRect方法来确定Web页面元素的宽度和高度。此方法提供了top、bottom、right、left、width和height六个属性，IE9及以下版本浏览器仅支持前四个属性，而IE9和其他现代浏览器则支持所有属性。通过简单的计算，可以得到元素的确切尺寸。

getBoundingClientRect 方法有6个属性 top 、bottom、right、left、width和height

ie9以下浏览器只支持 getBoundingClientRect 方法的 top 、bottom、right、left属性；

ie9 和其它浏览器支持 getBoundingClientRect 方法有6个属性 top 、bottom、right、left、width和height；

问题

想要确定一个Web页面元素的当前宽度width和高度height；

解决方法：

//页面宽度 = right - left
var width = ele.getBoundingClientRect().right-ele.getBoundingClientRect().left;

//页面高度 = right - left
var width = ele.getBoundingClientRect().bottom -ele.getBoundingClientRect().top;