JS读取元素的样式

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script type="text/javascript">
            
            /*
             * 通过currentStyle和getComputedStyle()读取到的样式都是只读的，
             *     不能修改，如果要修改，必须通过style属性。
             */
            
            window.onload=function()
            {
                var btn01=document.getElementById("btn01");
            
                var box1=document.getElementById("box1");
                /*
                 * currentStyle只有IE浏览器支持，其他浏览器都不支持。
                 * 
                 * 获取元素的当前显示的样式
                 *     语法：元素.currentStyle.样式名
                 * 它可以用来读取当前元素正在显示的样式
                 *  如果元素没有设置样式，则获取他的默认值。比如width未设置的话返回auto。 
                 * 
                 */
                
                btn01.onclick=function()
                {
                    alert(box1.currentStyle.width);
                }
                
                /*
                 * 在其他浏览器种可以使用(不支持IE8及以下)。
                 *         getComputedStyle()这个方法来获取元素当前的样式
                 *         这个方法是window的方法，可以直接使用
                 * 需要两个参数
                 *         第一个，要获取样式的元素
                 *         第二个，可以传递一个伪元素，一般都传null
                 * 
                 * 该方法会返回一个对象，对象中封装了当前元素对应的样式。
                 * 可以通过  对象.样式名来读取样式
                 * 如果未设置width，获取width时返回准确宽度，不会返回auto，获取颜色会返回rgb值。
                 */
                var btn02=document.getElementById("btn02");
                btn02.onclick=function()
                {
                    var obj=getComputedStyle(box1,null);
                    alert(obj.width);
                }
                
                
                //同时兼任IE8和其他浏览器的按钮
                var btn03=document.getElementById("btn03");
                btn03.onclick=function()
                {
                    var get=getStyle(box1,"width");
                    alert(get);
                        
                }
                        
            }
                /*
                 * 定义一个函数，用来获取指定元素的当前的样式
                 * 参数：
                 *         obj 要获取样式的元素
                 *         name 要获取的样式名
                 */
                function getStyle(obj,name)
                {
                    //正常浏览器的方式
                    //return getComputedStyle(obj,null)[name]//获取对象的name属性，如果写成.name的话name就不是变量了。
                    
                    //IE8的方式
                    //return obj.currentStyle[name];
                
                    if(window.getComputedStyle)//getComputedStyle返回一个对象，转换为Boolean类型。不加window为变量，变量找不着会报错，加了window变成属性，属性找不着返回undefined。
                    {
                        return getComputedStyle(obj,null)[name];
                    }
                    else
                    {
                        return obj.currentStyle[name];
                    }
                }
            
        </script>
    </head>
    <body>
        <button id="btn01">点我一下</button>
        <button id="btn02">点我一下</button>
        <button id="btn03">点我一下</button>
        <br /><br />
        <div id="box1"></div>
    </body>
</html>
JS读取元素的样式

猜你喜欢
