How do you read CSS rule values with JavaScript?

后端 未结 16 1470
天涯浪人
天涯浪人 2020-11-21 21:02

I would like to return a string with all of the contents of a CSS rule, like the format you\'d see in an inline style. I\'d like to be able to do this without knowing what i

16条回答
  •  夕颜
    夕颜 (楼主)
    2020-11-21 21:44

    SOLUTION 1 (CROSS-BROWSER)

    function GetProperty(classOrId,property)
    { 
        var FirstChar = classOrId.charAt(0);  var Remaining= classOrId.substring(1);
        var elem = (FirstChar =='#') ?  document.getElementById(Remaining) : document.getElementsByClassName(Remaining)[0];
        return window.getComputedStyle(elem,null).getPropertyValue(property);
    }
    
    alert( GetProperty(".my_site_title","position") ) ;
    

    SOLUTION 2 (CROSS-BROWSER)

    function GetStyle(CLASSname) 
    {
        var styleSheets = document.styleSheets;
        var styleSheetsLength = styleSheets.length;
        for(var i = 0; i < styleSheetsLength; i++){
            if (styleSheets[i].rules ) { var classes = styleSheets[i].rules; }
            else { 
                try {  if(!styleSheets[i].cssRules) {continue;} } 
                //Note that SecurityError exception is specific to Firefox.
                catch(e) { if(e.name == 'SecurityError') { console.log("SecurityError. Cant readd: "+ styleSheets[i].href);  continue; }}
                var classes = styleSheets[i].cssRules ;
            }
            for (var x = 0; x < classes.length; x++) {
                if (classes[x].selectorText == CLASSname) {
                    var ret = (classes[x].cssText) ? classes[x].cssText : classes[x].style.cssText ;
                    if(ret.indexOf(classes[x].selectorText) == -1){ret = classes[x].selectorText + "{" + ret + "}";}
                    return ret;
                }
            }
        }
    }
    
    alert( GetStyle('.my_site_title') );
    

提交回复
热议问题