欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-06 23:43:58
...
情景一,元素style属性设置了width/height
复制代码 代码如下:

test



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

test



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


test



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


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。各情景下元素宽高的获取实现代码_javascript技巧

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 各情景下元素宽高的获取实现代码_javascript技巧
  • 专题推荐

    作者信息
    各情景下元素宽高的获取实现代码_javascript技巧

    认证0级讲师

    推荐视频教程
  • 各情景下元素宽高的获取实现代码_javascript技巧javascript初级视频教程
  • 各情景下元素宽高的获取实现代码_javascript技巧jquery 基础视频教程
  • 视频教程分类
    相关标签: 元素宽高