各情景下元素宽高的获取实现代码_javascript技巧
程序员文章站
2022-03-06 23:43:58
...
情景一,元素style属性设置了width/height
复制代码 代码如下:
test
如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
如上,使用el.style.width即可。如果没有在style属性中设置width,那么使用el.style.width将获取不到,如下
复制代码 代码如下:
test
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到,如下
复制代码 代码如下:
test
这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
这时候getComputedStyle或currentStyle将会派上用场。
情景二,元素通过引入样式表设置width/height
有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
复制代码 代码如下:
test
所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。如下
所有浏览器中均弹出了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属性,也没有引入样式表
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。
思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程
全栈 170W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
-
玉女心经-web前端开发教程
入门 80W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
-
天龙八部-实战开发教程
实战 120W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
- 最新文章
- 热门排行
上一篇: js获取隐藏元素宽高的实现方法_javascript技巧
下一篇: javascript基于对象吗
推荐阅读
-
Javascript获取CSS伪元素属性的实现代码_javascript技巧
-
js获取元素相对窗口位置的实现代码_javascript技巧
-
js获取隐藏元素宽高的实现方法_javascript技巧
-
各情景下元素宽高的获取实现代码_javascript技巧
-
javascript获取隐藏dom的宽高 具体实现_javascript技巧
-
Javascript获取CSS伪元素属性的实现代码_javascript技巧
-
js获取元素相对窗口位置的实现代码_javascript技巧
-
原生javascript实现获取指定元素下所有后代元素的方法_javascript技巧
-
原生javascript实现获取指定元素下所有后代元素的方法_javascript技巧
-
javascript获取隐藏dom的宽高 具体实现_javascript技巧
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论