栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

各情景下元素宽高的获取实现代码

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

各情景下元素宽高的获取实现代码

情景一,元素style属性设置了width/height
复制代码 代码如下:
test


如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
复制代码 代码如下:
test


所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
复制代码 代码如下:

div {width: 100px}

test


这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
复制代码 代码如下:

div {width: 100px}

test


所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。如下
复制代码 代码如下:
test


div 既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(浏览器默认),但IE6/7/8中却不行,返回的是auto。
注意,这里getStyle方法优先使用getComputedStyle,而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持,只能使用currentStyle获取。
情景三,元素既没有设置style属性,也没有引入样式表
复制代码 代码如下:
test


思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。
转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/113800.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号