js获取非行间样式--有bug，忧伤 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getStyle提取非行间样式——只能提取不能设置</title>
    <style>
        *{padding:0; margin:0;}
        #div1{width:300px; height:300px; background:#f00; margin:50px auto;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; border:2px solid #000;}
    </style>
    <script>
        window.onload=function(){
            function getStyle(obj,name){
                if(obj.currentStyle){
                    //alert("现在使用的是obj.currentStyle");
                    return obj.currentStyle[name];
                }else{
                    //alert("现在使用的是getComputedStyle");
                    return getComputedStyle(obj,false)[name];
                };
            };
            var oDiv=document.getElementById("div1");
            alert(getStyle(oDiv,"border-color"));
        }
        /*火狐和IE下无法获取border的值,火狐下无法获取border-width的值，火狐下无法获取border-color的值*/
        /*window.onload=function(){
            function nameForm(name){
                var aName=name.split("");
                for(var i=0;i<aName.length;i++){
                    if(aName[i]=="-"){
                        aName.splice(i,1);
                        aName[i]=aName[i].toUpperCase();
                    };
                };
                var sName=aName.join("");
                return sName;
            };//nameForm，名字格式
            function getStyle(obj,name){
                var oGetStyleMethod=null;
                if(obj.currentStyle){
                    oGetStyleMethod=obj.currentStyle;
                }else{
                    oGetStyleMethod=getComputedStyle(obj,false);
                };
                if(oGetStyleMethod.getAttribute){
                    alert("我使用的是getAttribute");
                    var sName=nameForm(name);
                    return oGetStyleMethod.getAttribute(sName);
                }else{
                    alert("我使用的是getPropertyValue");
                    return oGetStyleMethod.getPropertyValue(name);
                }
            };
            var oDiv=document.getElementById("div1");
            alert(getStyle(oDiv,"border-color"));
        }*/
        /*火狐和IE下无法获取border-radius的值*/
        /*经过测试用JQuery中的css()函数也无法获取火狐下border-radius的值*/
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

不能完全兼容所有浏览器，不能完全提取出所有样式……

posted @ 2015-08-12 10:36  四叶草黎  阅读(207)  评论(0)  编辑  收藏  举报