你如何用JavaScript阅读CSS规则值？

我想返回一个包含CSS规则所有内容的字符串,就像您在内联样式中看到的格式一样.我希望能够在不知道特定规则中包含的内容的情况下执行此操作,因此我不能仅通过样式名称将其拉出(如.style.width等)

CSS:

.test {
    width:80px;
    height:50px;
    background-color:#808080;
}

到目前为止的代码:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
    for(var x=0;x

    

  




  
  
  

    

      

        小智..
         81
      
      
改编自这里,建立在scunliffe的回答:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == className) {
            (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyle('.test');

        

          
          

              如果有多个样式表,那么你也需要循环遍历那些样式表.for(var i = 0; i (13认同)
          
 
          
          

              请注意,className必须与CSS文件中使用的选择器完全匹配.例如,如果样式被描述为".article a,article a:hover {color:#ccc;}",则getStyle(".article a")将找不到任何内容. (10认同)
          
 
          
          

              @Johnydep`var classes`应该是Chrome中的`document.styleSheets [0] .rules [0] .cssRules`.这可以(创造性地)添加到答案中的垫片中. (2认同)
          
 
          
        

      

    

  

  
  

    

      

        dude..
         22
      
      
由于"nsdel"中接受的答案仅适用于文档中的一个样式表,因此这是经过调整的完整工作解决方案:

    /**
     * Gets styles by a classname
     * 
     * @notice The className must be 1:1 the same as in the CSS
     * @param string className_
     */
    function getStyle(className_) {

        var styleSheets = window.document.styleSheets;
        var styleSheetsLength = styleSheets.length;
        for(var i = 0; i < styleSheetsLength; i++){
            var classes = styleSheets[i].rules || styleSheets[i].cssRules;
            if (!classes)
                continue;
            var classesLength = classes.length;
            for (var x = 0; x < classesLength; x++) {
                if (classes[x].selectorText == className_) {
                    var ret;
                    if(classes[x].cssText){
                        ret = classes[x].cssText;
                    } else {
                        ret = classes[x].style.cssText;
                    }
                    if(ret.indexOf(classes[x].selectorText) == -1){
                        ret = classes[x].selectorText + "{" + ret + "}";
                    }
                    return ret;
                }
            }
        }

    }


注意:选择器必须与CSS中的相同.


1> 小智..：
改编自这里,建立在scunliffe的回答:

function getStyle(className) {
    var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
    for (var x = 0; x < classes.length; x++) {
        if (classes[x].selectorText == className) {
            (classes[x].cssText) ? alert(classes[x].cssText) : alert(classes[x].style.cssText);
        }
    }
}
getStyle('.test');

        
如果有多个样式表,那么你也需要循环遍历那些样式表.for(var i = 0; i 请注意,className必须与CSS文件中使用的选择器完全匹配.例如,如果样式被描述为".article a,article a:hover {color:#ccc;}",则getStyle(".article a")将找不到任何内容. 
@Johnydep`var classes`应该是Chrome中的`document.styleSheets [0] .rules [0] .cssRules`.这可以(创造性地)添加到答案中的垫片中. 

2> dude..：
由于"nsdel"中接受的答案仅适用于文档中的一个样式表,因此这是经过调整的完整工作解决方案:

    /**
     * Gets styles by a classname
     * 
     * @notice The className must be 1:1 the same as in the CSS
     * @param string className_
     */
    function getStyle(className_) {

        var styleSheets = window.document.styleSheets;
        var styleSheetsLength = styleSheets.length;
        for(var i = 0; i < styleSheetsLength; i++){
            var classes = styleSheets[i].rules || styleSheets[i].cssRules;
            if (!classes)
                continue;
            var classesLength = classes.length;
            for (var x = 0; x < classesLength; x++) {
                if (classes[x].selectorText == className_) {
                    var ret;
                    if(classes[x].cssText){
                        ret = classes[x].cssText;
                    } else {
                        ret = classes[x].style.cssText;
                    }
                    if(ret.indexOf(classes[x].selectorText) == -1){
                        ret = classes[x].selectorText + "{" + ret + "}";
                    }
                    return ret;
                }
            }
        }

    }


注意:选择器必须与CSS中的相同.

        
如果样式表没有规则或cssRules(可能发生!),你的代码就会失败.添加if(!classes)继续; 在var classes = styleSheets [i] .rules ||之后 样式表[I] .cssRules; var classesLength = classes.length; 看我的编辑 

3> T.Todua..：
解决方案1(交叉浏览器)

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") ) ;


解决方案2(交叉浏览器)

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') );

        

4> Larsenal..：
一些浏览器差异需要注意:

鉴于CSS:

div#a { ... }
div#b, div#c { ... }


在InsDel的例子中,类将在FF中有2个类,在IE7中有3个类.

我的例子说明了这一点




    
    


    

    RULES: