各情景下元素宽高的获取

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

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

    <div id="DivTest" style="100px">test</div>
    <script language="javascript" type="text/javascript">
        var eleDiv = document.getElementById("DivTest");
        alert(eleDiv.style.width);
    </script>

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

    <div id="DivTest">test</div>
    <script language="javascript" type="text/javascript">
        var eleDiv = document.getElementById("DivTest");
        alert(eleDiv.style.width);
    </script>

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

    <style type="text/css">
        div{ 100px; }
    </style>

    <div id="DivTest">test</div>
    <script language="javascript" type="text/javascript">
        var eleDiv = document.getElementById("DivTest");
        alert(eleDiv.style.width);
    </script>

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

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

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

    <style type="text/css">
        div{ 100px; }
    </style>

    <div id="DivTest">test</div>
    <script language="javascript" type="text/javascript">
        function getStyle(el, name) {
            if(window.getComputedStyle) {
                return window.getComputedStyle(el, null)[name];
            }else{
                return el.currentStyle[name];
            }
        }

        var eleDiv = document.getElementById("DivTest");
        alert(getStyle(eleDiv , "width"));
    </script>

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

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

div 既没有设置style属性，也没有引入样式表。在Firefox/IE9/Safari/Chrome/Opera中可以获取到宽高（元素宽度的默认值），但IE6/7/8中却不行，返回的是auto。

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

    <style type="text/css">
        div{ padding:0 100px; }
    </style>

    <div id="DivTest">test</div>
    <script language="javascript" type="text/javascript">
        function getStyle(el, name) {
            if(window.getComputedStyle) {
                return window.getComputedStyle(el, null)[name.toLowerCase()];//Format: 'border-left-width' 'paddingleft'
            }else{
                return el.currentStyle[name.replace(/-/g,"")];//Formart: 'borderLeftWidth' 'paddingLeft'
            }
        }
        function getWH(el, name) {
            var val = name === "Width" ? el.offsetWidth : el.offsetHeight,
                which = name === "Width" ? ['Left', 'Right'] : ['Top', 'Bottom'];
            if(val === 0)
                return 0;
            for(var i = 0, a; a = which[i++];) {
                val -= parseFloat( getStyle(el, "border-" + a + "-" + name) ) || 0;
                val -= parseFloat( getStyle(el, "padding-" + a) ) || 0;
            }
            return val + 'px';
        }
        var eleDiv = document.getElementById("DivTest");
        alert(getWH(eleDiv , "Width"));
    </script>

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