kristain

博客园 首页 新随笔 联系 订阅 管理

转自 snandy http://www.cnblogs.com/snandy/archive/2011/09/06/2167440.html

各情景下元素宽高的获取

为了叙述简单,这里仅拿width示例。

情景一,元素style属性设置了width/height

1 <div style="width:100px;">test<div>
2 <script>
3     var div = document.getElementsByTagName('div')[0];
4     alert(div.style.width);
5 </script>

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

1 <div>test<div>
2 <script>
3     var div = document.getElementsByTagName('div')[0];
4     alert(div.style.width);
5 </script>

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

1 <style>
2     div {width: 100px}
3 </style>
4 <div>test<div>
5 <script>
6     var div = document.getElementsByTagName('div')[0];
7     alert(div.style.width);
8 </script>

这时候getComputedStyle或currentStyle将会派上用场。

情景二,元素通过引入样式表设置width/height

有两种方式引入样式表,一是使用link标签引入单独的css文件,二是直接在html页面中使用style标签。这里使用第二种方式测试。如下

01 <style>
02     div {width: 100px}
03 </style>
04 <div>test<div>
05 <script>
06     function getStyle(el, name) {
07         if(window.getComputedStyle) {
08             return window.getComputedStyle(el, null);
09         }else{
10             return el.currentStyle;
11         }
12     }
13     var div = document.getElementsByTagName('div')[0];
14     alert(getStyle(div, 'width'));
15 </script>

所有浏览器中均弹出了100px。说明通过getComputedStyle和currentStyle可以获取到元素被定义在样式表中的宽高。

那如果元素即没有在style属性中设置宽高,也没有在样式表中设置宽高,还能用getComputedStyle或currentStyle获取吗?答案是getComputedStyle可以,currentStyle不可以。如下

01 <div>test<div>
02 <script>
03     function getStyle(el, name) {
04         if(window.getComputedStyle) {
05             return window.getComputedStyle(el, null);
06         }else{
07             return el.currentStyle;
08         }
09     }
10     var div = document.getElementsByTagName('div')[0];
11     alert(getStyle(div, 'width'));
12 </script>

div 既没有设置style属性,也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高(浏览器默认),但IE6/7/8中却不行,返回的是auto

注意,这里getStyle方法优先使用getComputedStyle,而IE9已经支持该方法。因此IE9中可以获取到宽高。但IE6/7/8不支持,只能使用currentStyle获取。

情景三,元素既没有设置style属性,也没有引入样式表

01 <div>test<div>
02 <script>
03     function getStyle(el) {
04         if(window.getComputedStyle) {
05             return window.getComputedStyle(el, null);
06         }else{
07             return el.currentStyle;
08         }
09     }
10     function getWH(el, name) {
11         var val = name === "width" ? el.offsetWidth : el.offsetHeight,
12             which = name === "width" ? ['left', 'right'] : ['top', 'bottom'];
13          
14         // display is none
15         if(val === 0) {
16             return 0;
17         }
18  
19         for(var i = 0, a; a = which[i++];) {
20             val -= parseFloat( getStyle(el, "border" + a + "Width") ) || 0;
21             val -= parseFloat( getStyle(el, "padding" + a) ) || 0;
22         }
23      
24         return val + 'px';
25     }
26     var div = document.getElementsByTagName('div')[0];
27     alert(getWH(div, 'width'));
28 </script>

思路很简单:获取元素的offsetWidth/offsetHeight,减去元素的padding和border。

posted on 2011-09-06 11:08  kristain  阅读(184)  评论(0编辑  收藏  举报