blocks|key|1680054|text|//在IE中工作，不确定其他浏览器...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1680055|alert(classes[x].style.cssText);|code-block|syntax|javascript|1680056|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

//works in IE, not sure about other browsers...

<pre><code>alert(classes[x].style.cssText);
</code></pre>

blocks|key|1680102|text|改编自here，以scunliffe的答案为基础：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1680103|function+getStyle(className)+{
++++var+cssText+=+"";
++++var+classes+=+document.styleSheets[0].rules+%7C%7C+document.styleSheets[0].cssRules;
++++for+(var+x+=+0;+x+<+classes.length;+x%2B%2B)+{++++++++
++++++++if+(classes[x].selectorText+==+className)+{
++++++++++++cssText+%2B=+classes[x].cssText+%7C%7C+classes[x].style.cssText;
++++++++}+++++++++
++++}
++++return+cssText;
}

alert(getStyle('.test'));|code-block|syntax|javascript|1680104|entityMap|0|LINK|mutability|MUTABLE|url|http://www.javascriptkit.com/domref/cssrule.shtml^0|3|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

Adapted from <a href="http://www.javascriptkit.com/domref/cssrule.shtml" rel="noreferrer">here</a>, building on scunliffe's answer:

<pre><code>function getStyle(className) {
 var cssText = "";
 var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
 for (var x = 0; x &lt; classes.length; x++) { 
 if (classes[x].selectorText == className) {
 cssText += classes[x].cssText || classes[x].style.cssText;
 } 
 }
 return cssText;
}

alert(getStyle('.test'));
</code></pre>

blocks|key|1464908|text|我做了一个类似的helper函数来显示这个页面不需要的样式。将一个<div>追加到正文中，列出所有未使用的样式。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1464909|(与firebug控制台一起使用)|1464910|(function+getStyles(){var+CSSrules,allRules,CSSSheets,+unNeeded,+currentRule;
CSSSheets=document.styleSheets;

for(j=0;j<CSSSheets.length;j%2B%2B){
for(i=0;i<CSSSheets[j].cssRules.length;i%2B%2B){
++++currentRule+=+CSSSheets[j].cssRules[i].selectorText;

++++if(!document.querySelectorAll(currentRule).length){+
+++++++unNeeded%2B=CSSSheets[j].cssRules[i].cssText%2B" ";+
++}+++++++
+}
}

docBody=document.getElementsByTagName("body")[0];
allRulesContainer=document.createElement("div");
docBody.appendChild(allRulesContainer);
allRulesContainer.innerHTML=unNeeded%2BisHover;
return+false
})()|code-block|syntax|javascript|1464911|entityMap^0|X|5|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|R|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|S|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

I made a similar helper function 
which shows the unneeded styles for this page. appends a <code>&lt;div&gt;</code> to the body listing all styles that where not used.

(to be used with the firebug console)

<pre><code>(function getStyles(){var CSSrules,allRules,CSSSheets, unNeeded, currentRule;
CSSSheets=document.styleSheets;

for(j=0;j&lt;CSSSheets.length;j++){
for(i=0;i&lt;CSSSheets[j].cssRules.length;i++){
 currentRule = CSSSheets[j].cssRules[i].selectorText;

 if(!document.querySelectorAll(currentRule).length){ 
 unNeeded+=CSSSheets[j].cssRules[i].cssText+"&lt;br&gt;"; 
 } 
 }
}

docBody=document.getElementsByTagName("body")[0];
allRulesContainer=document.createElement("div");
docBody.appendChild(allRulesContainer);
allRulesContainer.innerHTML=unNeeded+isHover;
return false
})()
</code></pre>

blocks|key|1464947|text|function+getStyle(className)+{
++++document.styleSheets.item("menu").cssRules.item(className).cssText;
}
getStyle('.test')|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1464948|注意："menu“是您应用CSS的元素ID。"className“一个css类名，我们需要它来获取它的文本。|unstyled|1464949|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>function getStyle(className) {
 document.styleSheets.item("menu").cssRules.item(className).cssText;
}
getStyle('.test')
</code></pre>

Note : "menu" is an element ID which you have applied CSS.
"className" a css class name which we need to get its text.

blocks|key|1680211|text|此版本将遍历页面上的所有样式表。根据我的需要，样式通常在20%2B样式表的倒数第二个中，所以我向后检查它们。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1680212|++++var+getStyle+=+function(className){
++++++++var+x,+sheets,classes;
++++++++for(+sheets=document.styleSheets.length-1;+sheets>=0;+sheets--+){
++++++++++++classes+=+document.styleSheets[sheets].rules+%7C%7C+document.styleSheets[sheets].cssRules;
++++++++++++for(x=0;x<classes.length;x%2B%2B)+{
++++++++++++++++if(classes[x].selectorText===className)+{
++++++++++++++++++++return++(classes[x].cssText+?+classes[x].cssText+:+classes[x].style.cssText);
++++++++++++++++}
++++++++++++}
++++++++}
++++++++return+false;
++++};|code-block|syntax|javascript|1680213|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This version will go through all of the stylesheets on a page. For my needs, the styles were usually in the 2nd to last of the 20+ stylesheets, so I check them backwards.

<pre><code> var getStyle = function(className){
 var x, sheets,classes;
 for( sheets=document.styleSheets.length-1; sheets&gt;=0; sheets-- ){
 classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;
 for(x=0;x&lt;classes.length;x++) {
 if(classes[x].selectorText===className) {
 return (classes[x].cssText ? classes[x].cssText : classes[x].style.cssText);
 }
 }
 }
 return false;
 };
</code></pre>

blocks|key|1680238|text|我添加了return+of+object，其中属性被解析出样式/值：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1680239|var+getClassStyle+=+function(className){
++++var+x,+sheets,classes;
++++for(+sheets=document.styleSheets.length-1;+sheets>=0;+sheets--+){
++++++++classes+=+document.styleSheets[sheets].rules+%7C%7C+document.styleSheets[sheets].cssRules;
++++++++for(x=0;x<classes.length;x%2B%2B)+{
++++++++++++if(classes[x].selectorText===className){
++++++++++++++++classStyleTxt+=+(classes[x].cssText+?+classes[x].cssText+:+classes[x].style.cssText).match(/\{\s*([%5E{}]%2B)\s*\}/)[1];
++++++++++++++++var+classStyles+=+{};
++++++++++++++++var+styleSets+=+classStyleTxt.match(/([%5E;:]%2B:\s*[%5E;:]%2B\s*)/g);
++++++++++++++++for(y=0;y<styleSets.length;y%2B%2B){
++++++++++++++++++++var+style+=+styleSets[y].match(/\s*([%5E:;]%2B):\s*([%5E;:]%2B)/);
++++++++++++++++++++if(style.length+>+2)
++++++++++++++++++++++++classStyles[style[1]]=style[2];
++++++++++++++++}
++++++++++++++++return+classStyles;
++++++++++++}
++++++++}
++++}
++++return+false;
};|code-block|syntax|javascript|1680240|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I added return of object where attributes are parsed out style/values:

<pre><code>var getClassStyle = function(className){
 var x, sheets,classes;
 for( sheets=document.styleSheets.length-1; sheets&gt;=0; sheets-- ){
 classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;
 for(x=0;x&lt;classes.length;x++) {
 if(classes[x].selectorText===className){
 classStyleTxt = (classes[x].cssText ? classes[x].cssText : classes[x].style.cssText).match(/\{\s*([^{}]+)\s*\}/)[1];
 var classStyles = {};
 var styleSets = classStyleTxt.match(/([^;:]+:\s*[^;:]+\s*)/g);
 for(y=0;y&lt;styleSets.length;y++){
 var style = styleSets[y].match(/\s*([^:;]+):\s*([^;:]+)/);
 if(style.length &gt; 2)
 classStyles[style[1]]=style[2];
 }
 return classStyles;
 }
 }
 }
 return false;
};
</code></pre>

blocks|key|1465107|text|因为来自"nsdel“的被接受的答案只适用于文档中的一个样式表，所以这是经过调整的完整工作解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465108|++++/**
+++++*+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%2B%2B){
++++++++++++var+classes+=+styleSheets[i].rules+%7C%7C+styleSheets[i].cssRules;
++++++++++++if+(!classes)
++++++++++++++++continue;
++++++++++++var+classesLength+=+classes.length;
++++++++++++for+(var+x+=+0;+x+<+classesLength;+x%2B%2B)+{
++++++++++++++++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+%2B+"{"+%2B+ret+%2B+"}";
++++++++++++++++++++}
++++++++++++++++++++return+ret;
++++++++++++++++}
++++++++++++}
++++++++}

++++}|code-block|syntax|javascript|1465109|注意:选择器必须与CSS中的相同。|1465110|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Since the accepted answer from "nsdel" is only avilable with one stylesheet in a document this is the adapted full working solution:

<pre><code> /**
 * 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 &lt; styleSheetsLength; i++){
 var classes = styleSheets[i].rules || styleSheets[i].cssRules;
 if (!classes)
 continue;
 var classesLength = classes.length;
 for (var x = 0; x &lt; 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;
 }
 }
 }

 }
</code></pre>

Notice: The selector must be the same as in the CSS.

blocks|key|1465126|text|解决方案1(跨浏览器)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465127|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")+)+;|code-block|syntax|javascript|1465128|解决方案2(跨浏览器)|1465129|function+GetStyle(CLASSname)+
{
++++var+styleSheets+=+document.styleSheets;
++++var+styleSheetsLength+=+styleSheets.length;
++++for(var+i+=+0;+i+<+styleSheetsLength;+i%2B%2B){
++++++++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:+"%2B+styleSheets[i].href);++continue;+}}
++++++++++++var+classes+=+styleSheets[i].cssRules+;
++++++++}
++++++++for+(var+x+=+0;+x+<+classes.length;+x%2B%2B)+{
++++++++++++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+%2B+"{"+%2B+ret+%2B+"}";}
++++++++++++++++return+ret;
++++++++++++}
++++++++}
++++}
}

alert(+GetStyle('.my_site_title')+);|1465130|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<h1>SOLUTION 1 (CROSS-BROWSER)</h1>

<pre><code>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") ) ;
</code></pre>

<h1>SOLUTION 2 (CROSS-BROWSER)</h1>

<pre><code>function GetStyle(CLASSname) 
{
 var styleSheets = document.styleSheets;
 var styleSheetsLength = styleSheets.length;
 for(var i = 0; i &lt; 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 &lt; 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') );
</code></pre>

blocks|key|1680404|text|为了得到更完整的结果，我采用了julmot的答案。此方法还将返回类是选择器的一部分的样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1680405|//Get+all+styles+where+the+provided+class+is+involved
//Input+parameters+should+be+css+selector+such+as+.myClass+or+#m
//returned+as+an+array+of+tuples+{selectorText:"",+styleDefinition:""}
function+getStyleWithCSSSelector(cssSelector)+{
++++var+styleSheets+=+window.document.styleSheets;
++++var+styleSheetsLength+=+styleSheets.length;
++++var+arStylesWithCSSSelector+=+[];

++++//in+order+to+not+find+class+which+has+the+current+name+as+prefix
++++var+arValidCharsAfterCssSelector+=+["+",+".",+",",+"#",">","%2B",":","["];

++++//loop+through+all+the+stylessheets+in+the+bor
++++for(var+i+=+0;+i+<+styleSheetsLength;+i%2B%2B){
++++++++var+classes+=+styleSheets[i].rules+%7C%7C+styleSheets[i].cssRules;
++++++++var+classesLength+=+classes.length;
++++++++for+(var+x+=+0;+x+<+classesLength;+x%2B%2B)+{
++++++++++++//check+for+any+reference+to+the+class+in+the+selector+string
++++++++++++if(typeof+classes[x].selectorText+!=+"undefined"){
++++++++++++++++var+matchClass+=+false;

++++++++++++++++if(classes[x].selectorText+===+cssSelector){//exact+match
++++++++++++++++++++matchClass=true;
++++++++++++++++}else+{//check+for+it+as+part+of+the+selector+string
++++++++++++++++++++//TODO:+Optimize+with+regexp
++++++++++++++++++++for+(var+j=0;j<arValidCharsAfterCssSelector.length;+j%2B%2B){
++++++++++++++++++++++++var+cssSelectorWithNextChar+=+cssSelector%2B+arValidCharsAfterCssSelector[j];

++++++++++++++++++++++++if(classes[x].selectorText.indexOf(cssSelectorWithNextChar)!=-1){
++++++++++++++++++++++++++++matchClass=true;
++++++++++++++++++++++++++++//break+out+of+for-loop
++++++++++++++++++++++++++++break;
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++}

++++++++++++++++if(matchClass+===+true){
++++++++++++++++++++//console.log("Found+"%2B+cssSelectorWithNextChar+%2B+"+in+css+class+definition+"+%2B+classes[x].selectorText);
++++++++++++++++++++var+styleDefinition;
++++++++++++++++++++if(classes[x].cssText){
++++++++++++++++++++++++styleDefinition+=+classes[x].cssText;
++++++++++++++++++++}+else+{
++++++++++++++++++++++++styleDefinition+=+classes[x].style.cssText;
++++++++++++++++++++}
++++++++++++++++++++if(styleDefinition.indexOf(classes[x].selectorText)+==+-1){
++++++++++++++++++++++++styleDefinition+=+classes[x].selectorText+%2B+"{"+%2B+styleDefinition+%2B+"}";
++++++++++++++++++++}
++++++++++++++++++++arStylesWithCSSSelector.push({"selectorText":classes[x].selectorText,+"styleDefinition":styleDefinition});
++++++++++++++++}
++++++++++++}
++++++++}
++++}
++++if(arStylesWithCSSSelector.length==0)+{
++++++++return+null;
++++}else+{
++++++++return+arStylesWithCSSSelector;++++
++++}
}|code-block|syntax|javascript|1680406|此外，我还创建了一个函数，它将css样式定义收集到您提供的根节点的子树中(通过jquery选择器)。|1680407|function+getAllCSSClassDefinitionsForSubtree(selectorOfRootElement){
++++//stack+in+which+elements+are+pushed+and+poped+from
++++var+arStackElements+=+[];
++++//dictionary+for+checking+already+added+css+class+definitions
++++var+existingClassDefinitions+=+{}

++++//use+jquery+for+selecting+root+element
++++var+rootElement+=+$(selectorOfRootElement)[0];
++++//string+with+the+complete+CSS+output
++++var+cssString+=+"";

++++console.log("Fetching+all+classes+used+in+sub+tree+of+"+%2BselectorOfRootElement);
++++arStackElements.push(rootElement);
++++var+currentElement;

++++while(currentElement+=+arStackElements.pop()){
++++++++currentElement+=+$(currentElement);
++++++++console.log("Processing+element+"+%2B+currentElement.attr("id"));

++++++++//Look+at+class+attribute+of+element+
++++++++var+classesString+=+currentElement.attr("class");
++++++++if(typeof+classesString+!=+'undefined'){
++++++++++++var+arClasses+=+classesString.split("+");

++++++++++++//for+each+class+in+the+current+element
++++++++++++for(var+i=0;+i<+arClasses.length;+i%2B%2B){

++++++++++++++++//fetch+the+CSS+Styles+for+a+single+class.+Need+to+append+the+.+char+to+indicate+its+a+class
++++++++++++++++var+arStylesWithCSSSelector+=+getStyleWithCSSSelector("."%2BarClasses[i]);
++++++++++++++++console.log("Processing+class+"%2B+arClasses[i]);

++++++++++++++++if(arStylesWithCSSSelector+!=+null){
++++++++++++++++++++//console.log("Found+"%2B+arStylesWithCSSSelector.length+%2B+"+CSS+style+definitions+for+class+"+%2BarClasses[i]);
++++++++++++++++++++//append+all+found+styles+to+the+cssString
++++++++++++++++++++for(var+j=0;+j<+arStylesWithCSSSelector.length;+j%2B%2B){
++++++++++++++++++++++++var+tupleStyleWithCSSSelector+=+arStylesWithCSSSelector[j];

++++++++++++++++++++++++//check+if+it+has+already+been+added
++++++++++++++++++++++++if(typeof+existingClassDefinitions[tupleStyleWithCSSSelector.selectorText]+===+"undefined"){
++++++++++++++++++++++++++++//console.log("Adding+"+%2B+tupleStyleWithCSSSelector.styleDefinition);
++++++++++++++++++++++++++++cssString%2B=+tupleStyleWithCSSSelector.styleDefinition;
++++++++++++++++++++++++++++existingClassDefinitions[tupleStyleWithCSSSelector.selectorText]+=+true;
++++++++++++++++++++++++}else+{
++++++++++++++++++++++++++++//console.log("Already+added+"+%2B+tupleStyleWithCSSSelector.styleDefinition);
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++}
++++++++++++}
++++++++}
++++++++//push+all+child+elments+to+stack
++++++++if(currentElement.children().length>0){
++++++++++++arStackElements=+arStackElements.concat(currentElement.children().toArray());
++++++++}
++++}

++++console.log("Found+"+%2B+Object.keys(existingClassDefinitions).length+%2B+"+CSS+class+definitions");
++++return+cssString;
}|1680408|请注意，如果使用相同的选择器多次定义一个类，则上面的函数将只选取第一个选择器。请注意，该示例使用了jQuery+(但是cab相对容易地被重写为不使用它)|1680409|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Have adapted julmot's answer in order to get a more complete result. This method will also return styles where the class is part for the selector.

<pre><code>//Get all styles where the provided class is involved
//Input parameters should be css selector such as .myClass or #m
//returned as an array of tuples {selectorText:"", styleDefinition:""}
function getStyleWithCSSSelector(cssSelector) {
 var styleSheets = window.document.styleSheets;
 var styleSheetsLength = styleSheets.length;
 var arStylesWithCSSSelector = [];

 //in order to not find class which has the current name as prefix
 var arValidCharsAfterCssSelector = [" ", ".", ",", "#","&gt;","+",":","["];

 //loop through all the stylessheets in the bor
 for(var i = 0; i &lt; styleSheetsLength; i++){
 var classes = styleSheets[i].rules || styleSheets[i].cssRules;
 var classesLength = classes.length;
 for (var x = 0; x &lt; classesLength; x++) {
 //check for any reference to the class in the selector string
 if(typeof classes[x].selectorText != "undefined"){
 var matchClass = false;

 if(classes[x].selectorText === cssSelector){//exact match
 matchClass=true;
 }else {//check for it as part of the selector string
 //TODO: Optimize with regexp
 for (var j=0;j&lt;arValidCharsAfterCssSelector.length; j++){
 var cssSelectorWithNextChar = cssSelector+ arValidCharsAfterCssSelector[j];

 if(classes[x].selectorText.indexOf(cssSelectorWithNextChar)!=-1){
 matchClass=true;
 //break out of for-loop
 break;
 }
 }
 }

 if(matchClass === true){
 //console.log("Found "+ cssSelectorWithNextChar + " in css class definition " + classes[x].selectorText);
 var styleDefinition;
 if(classes[x].cssText){
 styleDefinition = classes[x].cssText;
 } else {
 styleDefinition = classes[x].style.cssText;
 }
 if(styleDefinition.indexOf(classes[x].selectorText) == -1){
 styleDefinition = classes[x].selectorText + "{" + styleDefinition + "}";
 }
 arStylesWithCSSSelector.push({"selectorText":classes[x].selectorText, "styleDefinition":styleDefinition});
 }
 }
 }
 }
 if(arStylesWithCSSSelector.length==0) {
 return null;
 }else {
 return arStylesWithCSSSelector; 
 }
}
</code></pre>

In addition, I've made a function which collects the css style definitions to the sub-tree of a root node your provide (through a jquery selector). 

<pre><code>function getAllCSSClassDefinitionsForSubtree(selectorOfRootElement){
 //stack in which elements are pushed and poped from
 var arStackElements = [];
 //dictionary for checking already added css class definitions
 var existingClassDefinitions = {}

 //use jquery for selecting root element
 var rootElement = $(selectorOfRootElement)[0];
 //string with the complete CSS output
 var cssString = "";

 console.log("Fetching all classes used in sub tree of " +selectorOfRootElement);
 arStackElements.push(rootElement);
 var currentElement;

 while(currentElement = arStackElements.pop()){
 currentElement = $(currentElement);
 console.log("Processing element " + currentElement.attr("id"));

 //Look at class attribute of element 
 var classesString = currentElement.attr("class");
 if(typeof classesString != 'undefined'){
 var arClasses = classesString.split(" ");

 //for each class in the current element
 for(var i=0; i&lt; arClasses.length; i++){

 //fetch the CSS Styles for a single class. Need to append the . char to indicate its a class
 var arStylesWithCSSSelector = getStyleWithCSSSelector("."+arClasses[i]);
 console.log("Processing class "+ arClasses[i]);

 if(arStylesWithCSSSelector != null){
 //console.log("Found "+ arStylesWithCSSSelector.length + " CSS style definitions for class " +arClasses[i]);
 //append all found styles to the cssString
 for(var j=0; j&lt; arStylesWithCSSSelector.length; j++){
 var tupleStyleWithCSSSelector = arStylesWithCSSSelector[j];

 //check if it has already been added
 if(typeof existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] === "undefined"){
 //console.log("Adding " + tupleStyleWithCSSSelector.styleDefinition);
 cssString+= tupleStyleWithCSSSelector.styleDefinition;
 existingClassDefinitions[tupleStyleWithCSSSelector.selectorText] = true;
 }else {
 //console.log("Already added " + tupleStyleWithCSSSelector.styleDefinition);
 }
 }
 }
 }
 }
 //push all child elments to stack
 if(currentElement.children().length&gt;0){
 arStackElements= arStackElements.concat(currentElement.children().toArray());
 }
 }

 console.log("Found " + Object.keys(existingClassDefinitions).length + " CSS class definitions");
 return cssString;
}
</code></pre>

Note that if a class is defined several times with the same selector, the above function will only pick up the first. Note that the example uses jQuery (but cab relatively easily be rewritten to not use it)

blocks|key|1465287|text|我没有发现任何一个真正有效的建议。这里有一个更健壮的方法，它可以在查找类时归一化间距。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465288|//Inside+closure+so+that+the+inner+functions+don't+need+regeneration+on+every+call.
const+getCssClasses+=+(function+()+{
++++function+normalize(str)+{
++++++++if+(!str)++return+'';
++++++++str+=+String(str).replace(/\s*([>~%2B])\s*/g,+'+$1+');++//Normalize+symbol+spacing.
++++++++return+str.replace(/(\s%2B)/g,+'+').trim();+++++++++++//Normalize+whitespace
++++}
++++function+split(str,+on)+{+++++++++++++++//Split,+Trim,+and+remove+empty+elements
++++++++return+str.split(on).map(x+=>+x.trim()).filter(x+=>+x);
++++}
++++function+containsAny(selText,+ors)+{
++++++++return+selText+?+ors.some(x+=>+selText.indexOf(x)+>=+0)+:+false;
++++}
++++return+function+(selector)+{
++++++++const+logicalORs+=+split(normalize(selector),+',');
++++++++const+sheets+=+Array.from(window.document.styleSheets);
++++++++const+ruleArrays+=+sheets.map((x)+=>+Array.from(x.rules+%7C%7C+x.cssRules+%7C%7C+[]));
++++++++const+allRules+=+ruleArrays.reduce((all,+x)+=>+all.concat(x),+[]);
++++++++return+allRules.filter((x)+=>+containsAny(normalize(x.selectorText),+logicalORs));
++++};
})();|code-block|syntax|javascript|1465289|这是它在Chrome控制台上的实际应用。|1465290|​|1465291|📷|atomic|offset|length|1465292|1465293|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/0479025b4184b96f82417685fb96c7b9.png|imageAlt^0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|10|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|11|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|12|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|13|8|@]|9|@$N|14|O|15|1|16]]|A|$]]|$1|P|3|J|5|6|7|17|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X|Y|-4]]]]

I've found none of the suggestions to really work. Here's a more robust one that normalizes spacing when finding classes. 

<pre><code>//Inside closure so that the inner functions don't need regeneration on every call.
const getCssClasses = (function () {
 function normalize(str) {
 if (!str) return '';
 str = String(str).replace(/\s*([&gt;~+])\s*/g, ' $1 '); //Normalize symbol spacing.
 return str.replace(/(\s+)/g, ' ').trim(); //Normalize whitespace
 }
 function split(str, on) { //Split, Trim, and remove empty elements
 return str.split(on).map(x =&gt; x.trim()).filter(x =&gt; x);
 }
 function containsAny(selText, ors) {
 return selText ? ors.some(x =&gt; selText.indexOf(x) &gt;= 0) : false;
 }
 return function (selector) {
 const logicalORs = split(normalize(selector), ',');
 const sheets = Array.from(window.document.styleSheets);
 const ruleArrays = sheets.map((x) =&gt; Array.from(x.rules || x.cssRules || []));
 const allRules = ruleArrays.reduce((all, x) =&gt; all.concat(x), []);
 return allRules.filter((x) =&gt; containsAny(normalize(x.selectorText), logicalORs));
 };
})();
</code></pre>

Here's it in action from the Chrome console. 

<a href="https://i.stack.imgur.com/AElQK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/AElQK.png" alt="enter image description here"></a>

blocks|key|1680603|text|基于@dude回答，这应该在一个对象中返回相关的样式，例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1680604|.recurly-input+{+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++display:+block;++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++border-radius:+2px;++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++-webkit-border-radius:+2px;++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++outline:+0;++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++box-shadow:+none;++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++border:+1px+solid+#beb7b3;+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++padding:+0.6em;++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++background-color:+#f7f7f7;+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++width:100%25;++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
}|code-block|syntax|javascript|1680605|这将返回：|1680606|backgroundColor:
"rgb(247,+247,+247)"
border
:
"1px+solid+rgb(190,+183,+179)"
borderBottom
:
"1px+solid+rgb(190,+183,+179)"
borderBottomColor
:
"rgb(190,+183,+179)"
borderBottomLeftRadius
:
"2px"
borderBottomRightRadius
:
"2px"
borderBottomStyle
:
"solid"
borderBottomWidth
:
"1px"
borderColor
:
"rgb(190,+183,+179)"
borderLeft
:
"1px+solid+rgb(190,+183,+179)"
borderLeftColor
:
"rgb(190,+183,+179)"
borderLeftStyle
:
"solid"
borderLeftWidth
:
"1px"
borderRadius
:
"2px"
borderRight
:
"1px+solid+rgb(190,+183,+179)"
borderRightColor
:
"rgb(190,+183,+179)"
borderRightStyle
:
"solid"
borderRightWidth
:
"1px"
borderStyle
:
"solid"
borderTop
:
"1px+solid+rgb(190,+183,+179)"
borderTopColor
:
"rgb(190,+183,+179)"
borderTopLeftRadius
:
"2px"
borderTopRightRadius
:
"2px"
borderTopStyle
:
"solid"
borderTopWidth
:
"1px"
borderWidth
:
"1px"
boxShadow
:
"none"
display
:
"block"
outline
:
"0px"
outlineWidth
:
"0px"
padding
:
"0.6em"
paddingBottom
:
"0.6em"
paddingLeft
:
"0.6em"
paddingRight
:
"0.6em"
paddingTop
:
"0.6em"
width
:
"100%25"|1680607|代码：|1680608|function+getStyle(className_)+{

++++var+styleSheets+=+window.document.styleSheets;
++++var+styleSheetsLength+=+styleSheets.length;
++++for(var+i+=+0;+i+<+styleSheetsLength;+i%2B%2B){
++++++++var+classes+=+styleSheets[i].rules+%7C%7C+styleSheets[i].cssRules;
++++++++if+(!classes)
++++++++++++continue;
++++++++var+classesLength+=+classes.length;
++++++++for+(var+x+=+0;+x+<+classesLength;+x%2B%2B)+{
++++++++++++if+(classes[x].selectorText+==+className_)+{
++++++++++++++++return+_.pickBy(classes[x].style,+(v,+k)+=>+isNaN(parseInt(k))+&&+typeof(v)+==+'string'+&&+v+&&+v+!=+'initial'+&&+k+!=+'cssText'+)
++++++++++++}
++++++++}
++++}

}|1680609|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Based on @dude answer this should return relevant styles in a object, for instance:

<pre><code>.recurly-input { 
 display: block; 
 border-radius: 2px; 
 -webkit-border-radius: 2px; 
 outline: 0; 
 box-shadow: none; 
 border: 1px solid #beb7b3; 
 padding: 0.6em; 
 background-color: #f7f7f7; 
 width:100%; 
}
</code></pre>

This will return:

<pre><code>backgroundColor:
"rgb(247, 247, 247)"
border
:
"1px solid rgb(190, 183, 179)"
borderBottom
:
"1px solid rgb(190, 183, 179)"
borderBottomColor
:
"rgb(190, 183, 179)"
borderBottomLeftRadius
:
"2px"
borderBottomRightRadius
:
"2px"
borderBottomStyle
:
"solid"
borderBottomWidth
:
"1px"
borderColor
:
"rgb(190, 183, 179)"
borderLeft
:
"1px solid rgb(190, 183, 179)"
borderLeftColor
:
"rgb(190, 183, 179)"
borderLeftStyle
:
"solid"
borderLeftWidth
:
"1px"
borderRadius
:
"2px"
borderRight
:
"1px solid rgb(190, 183, 179)"
borderRightColor
:
"rgb(190, 183, 179)"
borderRightStyle
:
"solid"
borderRightWidth
:
"1px"
borderStyle
:
"solid"
borderTop
:
"1px solid rgb(190, 183, 179)"
borderTopColor
:
"rgb(190, 183, 179)"
borderTopLeftRadius
:
"2px"
borderTopRightRadius
:
"2px"
borderTopStyle
:
"solid"
borderTopWidth
:
"1px"
borderWidth
:
"1px"
boxShadow
:
"none"
display
:
"block"
outline
:
"0px"
outlineWidth
:
"0px"
padding
:
"0.6em"
paddingBottom
:
"0.6em"
paddingLeft
:
"0.6em"
paddingRight
:
"0.6em"
paddingTop
:
"0.6em"
width
:
"100%"
</code></pre>

Code:

<pre><code>function getStyle(className_) {

 var styleSheets = window.document.styleSheets;
 var styleSheetsLength = styleSheets.length;
 for(var i = 0; i &lt; styleSheetsLength; i++){
 var classes = styleSheets[i].rules || styleSheets[i].cssRules;
 if (!classes)
 continue;
 var classesLength = classes.length;
 for (var x = 0; x &lt; classesLength; x++) {
 if (classes[x].selectorText == className_) {
 return _.pickBy(classes[x].style, (v, k) =&gt; isNaN(parseInt(k)) &amp;&amp; typeof(v) == 'string' &amp;&amp; v &amp;&amp; v != 'initial' &amp;&amp; k != 'cssText' )
 }
 }
 }

}
</code></pre>

blocks|key|1680646|text|下面是遍历页面中所有规则的代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1680647|​|1680648|function+iterateCSS(f)+{
++for+(const+styleSheet+of+window.document.styleSheets)+{
++++const+classes+=+styleSheet.rules+%7C%7C+styleSheet.cssRules;
++++if+(!classes)+continue;

++++for+(const+cssRule+of+classes)+{
++++++if+(cssRule.type+!==+1+%7C%7C+!cssRule.style)+continue;
++++++const+selector+=+cssRule.selectorText,+style=cssRule.style;
++++++if+(!selector+%7C%7C+!style.cssText)+continue;
++++++for+(let+i=0;+i<style.length;+i%2B%2B)+{
++++++++const+propertyName=style.item(i);
++++++++if+(f(selector,+propertyName,+style.getPropertyValue(propertyName),+style.getPropertyPriority(propertyName),+cssRule)===false)+return;
++++++}
++++}
++}
}

iterateCSS(+(selector,+propertyName,+propertyValue,+propertyPriority,+cssRule)+=>+{
++console.log(selector%2B'+{+'%2BpropertyName%2B':+'%2BpropertyValue%2B(propertyPriority==='important'+?+'+!important'+:+'')%2B'+}');
});|code-block|syntax|javascript|1680649|1680650|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

Here is code to iterate through all rules in a page:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function iterateCSS(f) {
 for (const styleSheet of window.document.styleSheets) {
 const classes = styleSheet.rules || styleSheet.cssRules;
 if (!classes) continue;

 for (const cssRule of classes) {
 if (cssRule.type !== 1 || !cssRule.style) continue;
 const selector = cssRule.selectorText, style=cssRule.style;
 if (!selector || !style.cssText) continue;
 for (let i=0; i&lt;style.length; i++) {
 const propertyName=style.item(i);
 if (f(selector, propertyName, style.getPropertyValue(propertyName), style.getPropertyPriority(propertyName), cssRule)===false) return;
 }
 }
 }
}

iterateCSS( (selector, propertyName, propertyValue, propertyPriority, cssRule) =&gt; {
 console.log(selector+' { '+propertyName+': '+propertyValue+(propertyPriority==='important' ? ' !important' : '')+' }');
});</code></pre>
</div>
</div>

blocks|key|1465454|text|我也面临着同样的问题。在一些人的帮助下，我想出了一个非常聪明的解决方案，完全解决了这个问题(在chrome上运行)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1465455|从网络中提取所有图像|1465456|+function+AllImagesUrl+(domain){
++return++performance.getEntries()
++++.filter(+e=>+
+++++++e.initiatorType+==+"img"+&&
+++++++new+RegExp(domain).test(e.name)+
++++)
++.map(+e=>+e.name.replace('some+cleaning+work+here','')+)+```|code-block|syntax|javascript|1465457|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I faced the same problem.
And with the help of guys I came up with a really smart solution that solve that problem totally (run on chrome ) .

Extract all images from the network

<pre class="lang-js prettyprint-override"><code> function AllImagesUrl (domain){
 return performance.getEntries()
 .filter( e=&gt; 
 e.initiatorType == "img" &amp;&amp;
 new RegExp(domain).test(e.name) 
 )
 .map( e=&gt; e.name.replace('some cleaning work here','') ) ```
</code></pre>

blocks|key|1465489|text|const+getStyle+=+query+=>+[...document.querySelector(query).computedStyleMap().entries()].map(e=>(e[1]%2B=[],e)).map(e=>e.join`:`%2B';').join`\n`|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1465490|在一行中，打印出为任何查询生成的css。|unstyled|1465491|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>const getStyle = query =&gt; [...document.querySelector(query).computedStyleMap().entries()].map(e=&gt;(e[1]+=[],e)).map(e=&gt;e.join`:`+';').join`\n`
</code></pre>

In one line, prints out generated css for any query.

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 is contained in a particular rule, so I can't just pull them out by style name (like <code>.style.width</code> etc.) 

The CSS:

<pre><code>.test {
 width:80px;
 height:50px;
 background-color:#808080;
}
</code></pre>

The code so far:

<pre><code>function getStyle(className) {
 var classes = document.styleSheets[0].rules || document.styleSheets[0].cssRules
 for(var x=0;x&lt;classes.length;x++) {
 if(classes[x].selectorText==className) {
 //this is where I can collect the style information, but how?
 }
 }
}
getStyle('.test')
</code></pre>

How do you read CSS rule values with JavaScript?

jQuery

我想返回一个包含CSS规则所有内容的字符串，就像您在内联样式中看到的格式一样。我希望能够在不知道特定规则中包含什么的情况下执行此操作，因此我不能仅通过样式名称(如.style.width等)来提取它们。CSS：.test {    width:80px;    height:50px;    background-co...

问如何使用JavaScript读取CSS规则值？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript读取CSS规则值？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用JavaScript读取CSS规则值？
EN