获取非行间样式

Posted 2020-10-17 杜俊锋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取非行间样式相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            #box{
                width: 300px;
                height: 200px;
                background: red;
            }

        </style>
    </head>
    <body>
        <div id="box"></div>
        
    </body>
</html>
<script type="text/javascript">
    var tt=document.getElementById("box");
//封装函数直接调用
    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }else{
            return getComputedStyle(obj)[attr]; 
        }
    }
    var gg = getStyle(tt,"width");
    console.log(gg)

三目表达式:

var oStyle = tt.currentStyle? tt.currentStyle : window.getComputedStyle(tt, null);

console.log(oStyle.width)




如果不考虑IE：直接获取辣鸡IE
console.log(getComputedStyle(tt)["width"])


</script>

以上是关于获取非行间样式的主要内容，如果未能解决你的问题，请参考以下文章

javascript 行间样式与非行间样式获取方法