情景一，元素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。

　　推荐阅读

　　关于onScroll事件在IE6下每次滚动触发三次bug说明

这里有一个人和我一样的情况 http://topic.csdn.net/t/20020826/11/970138.html 但帖子内有人测试又没问题，我测试的IE6是windows 2003下的，不知道XP下的是否已修复该问题。 在微软官方找到一篇关于IE5存在此BUG的>>>详细阅读

本文标题：各情景下元素宽高的获取实现代码

地址：http://www.17bianji.com/kaifa2/JS/24156.html

 1/2    1