获取html元素的样式值(包括默认的)

如何用Javascript获取HTML元素的Style属相值呢,你可能想到了el.style[styleName],但很不幸的是这种方法只能获取显示指定的Style值,比如<div style="color:red" id="test"></div>,通过document.getElementById("test").style["color"]可以获取该值,但如果想获取一些默认继承的Style值,比如font-size就不行了。那么怎么办呢?别急,看下面的:

function getElementStyle(elementID,styleNameForIE,styleNameForFF){
        el=document.getElementById(elementID);
        if(el.currentStyle){
            var style=el.currentStyle[styleNameForIE];
            alert('IE:'+style);
        }else if(document.defaultView && document.defaultView.getComputedStyle){
            var css=document.defaultView.getComputedStyle(el,null);
            var style = css ? css.getPropertyValue(styleNameForFF) : "";
            alert('FF:'+style);
        }else{
            style="no style";
        }
        
        return style;
}

上面的函数就可以获取所有当前某个元素的Style值,不论是显示还是默认的值都可以。你可能已经注意到了,IE和Firefox在实现的时候稍有不同。其中需要注意的是,当浏览器是IE的时候,传入的styleNameForIE应该是型如"fontSize", "paddingLeft",如果浏览器是FireFox的话,则styleNameForFF应该是型如"font-size", "padding-left",一定要注意哦。

原文地址:https://www.cnblogs.com/fxair/p/2577356.html