各情景下元素宽高的获取(转)

转自 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。