61 获取当前样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            #div1{
                background-color: red;
            }
        </style>
        <script>
            window.onload = function(){
                var oDiv = document.getElementById("div1")

                alert(oDiv.style.width)             //300px
                alert(oDiv.style.backgroundColor)       //空
                //【注】我们通过上述操作，只能找到行间的css样式



                /*
                    【注】获取当前有效样式

                    getComputedStyle(元素节点)[获取样式类型]
                    火狐/谷歌/Safari（苹果浏览器）支持  IE不支持
                */
                alert(getComputedStyle(oDiv)["backgroundColor"])            //rgb(255, 0, 0)



                /*
                    IE获取样式方法

                    元素节点.currenStyle[获取样式类型]
                    【注】浏览器兼容
                */
                //获取当前样式的兼容函数
                function getStyle(elem, attr){
                    return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr]
                }

                alert(getStyle(oDiv, "width"))          //300px
            }
        </script>
    </head>
    <body>
        <div id="div1" style="width: 300px; height: 300px;"></div>
    </body>
</html>