各情景下元素宽高的获取实现代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了各情景下元素宽高的获取实现代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2710字，纯文字阅读大概需要4分钟。
内容图文
情景一，元素style属性设置了width/height 代码如下:
<div style="width:100px;">test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>
如上，使用el.style.width即可。如果没有在style属性中设置width，那么使用el.style.width将获取不到，如下
代码如下:
<div>test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>
所有浏览器中弹出的是空字符串。即使将样式嵌在页面的css中也仍然获取不到，如下
代码如下:
<style>
div {width: 100px}
</style>
<div>test<div>
<script>
var div = document.getElementsByTagName('div')[0];
alert(div.style.width);
</script>
这时候getComputedStyle或currentStyle将会派上用场。
情景二，元素通过引入样式表设置width/height
有两种方式引入样式表，一是使用link标签引入单独的css文件，二是直接在html页面中使用style标签。这里使用第二种方式测试。如下
代码如下:
<style>
div {width: 100px}
</style>
<div>test<div>
<script>
function getStyle(el, name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null);
}else{
return el.currentStyle;
}
}
var div = document.getElementsByTagName('div')[0];
alert(getStyle(div, 'width'));
</script>
所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。
那如果元素即没有在style属性中设置宽高，也没有在样式表中设置宽高，还能用getComputedStyle或currentStyle获取吗？答案是getComputedStyle可以，currentStyle不可以。如下
代码如下:
<div>test<div>
<script>
function getStyle(el, name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null);
}else{
return el.currentStyle;
}
}
var div = document.getElementsByTagName('div')[0];
alert(getStyle(div, 'width'));
</script>
div 既没有设置style属性，也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高（浏览器默认），但IE6/7/8中却不行，返回的是auto。
注意，这里getStyle方法优先使用getComputedStyle，而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持，只能使用currentStyle获取。
情景三，元素既没有设置style属性，也没有引入样式表
代码如下:
<div>test<div>
<script>
function getStyle(el,name) {
if(window.getComputedStyle) {
return window.getComputedStyle(el, null)[name];
}else{
return el.currentStyle[name];
}
}
function getWH(el, name) {
var val = name === "width" ? el.offsetWidth : el.offsetHeight,
which = name === "width" ? ['Left', 'Right'] : ['Top', 'Bottom'];
// display is none
if(val === 0) {
return 0;
}
for(var i = 0, a; a = which[i++];) {
val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0;
val -= parseFloat( getStyle(el, "padding" + a) ) || 0;
}
return val + 'px';
}
var div = document.getElementsByTagName('div')[0];
alert(getWH(div, 'width'));
</script>
思路很简单：获取元素的offsetWidth/offsetHeight，减去元素的padding和border。
内容总结
以上是互联网集市为您收集整理的各情景下元素宽高的获取实现代码全部内容，希望文章能够帮你解决各情景下元素宽高的获取实现代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】