CSS rule Implementation code to get all of the page's selectors in JavaScript

The code is as follows

Copy Code

<script type= "Text/javascript" > /* ################################################### * Description: Use JavaScript to get the CSS rules with selectors on the page * includes ' internal style blocks ' and ' external style sheet files ' * Author: Yanfu Xie [xieyanfu@yahoo.com.cn] * Website: http://www.111cn.net * Date: 2007.01.16 * #################################################*/ function Getcssrule () { Total Styles var stylesheetlen = document.styleSheets.length; if (!stylesheetlen) return; Style rule name, IE and FireFox are different var rulename = (document.stylesheets[0].cssrules)? ' Cssrules ': ' Rules '; Firefox:cssrules | | Ie:rules Initial results var result = {}; var totalrulelen = 0; var totalselectorlen = 0; var totalproperty = 0; for (var i=0; i<stylesheetlen; i++) { Get each style sheet definition var styleSheet = document.stylesheets[i]; Number of rules per style sheet var rulelen = stylesheet[rulename].length; Totalrulelen + = Rulelen; for (var j=0; j<rulelen; J + +) { Gets the selector for the current rule Convert incoming selector to lowercase var selectors = Stylesheet[rulename][j].selectortext.tolowercase (). Split (","); var selectorlen = selectors.length; Totalselectorlen + = Selectorlen; for (var s=0; s<selectorlen; s++) { Remove the spaces around the selector Selector = Selectors[s].replace (/(^s*) | ( s*$)/g, ""); Initializes the current selector Result[selector] = {}; Get the current style var styleset = Stylesheet[rulename][j].style; For (property in Styleset) { Get rules if (Styleset[property] && property!= ' Csstext ') { Alert (selector + ' => ' + property + ': ' + Styleset[property]) Result[selector][property] = Styleset[property]; Totalproperty + 1; } } } } } Statistical data Result.totalsheet = Stylesheetlen; Style block Result.totalrule = Totalrulelen; Number of rules Result.totalselector = Totalselectorlen; Selection character Result.totalproperty = Totalproperty; Property return result; } </script>

Usage examples:

The code is as follows

Copy Code

<link rel= "stylesheet" type= "Text/css" href= "Test.css"/> <style type= "Text/css" > A.code, A.test { Color: #fff; Background: #eee; } . class { border-top:1px solid #eee; } </style> <script language= "JavaScript" type= "Text/javascript" > Get rules var css = Getcssrule (); Gets the CSS property value below the specified selector Selector: selector (lowercase) Attribute: Query CSS properties, script mode (such as: Background-color for BackgroundColor) function Getcssvalue (selector, attribute) { Return (Css[selector])? (Css[selector][attribute])? Css[selector][attribute]:false:false; } document.write ("<strong> statistical data </strong> <br/>"); document.write (Css.totalsheet + "CSS style blocks (including &lt;link/&gt; tags and &lt;style&gt;&lt;/style&gt; Style block) <br/> "); document.write (Css.totalrule + "rule (FireFox under the grouping selector such as: Body, form, p {}, IE will be calculated separately) <br/>"); document.write (Css.totalselector + "selector (separate group selector) <br/>"); document.write (Css.totalproperty + "CSS properties (such as: border:1px solid #eee;) <br/><br"); Incoming selector is lowercase, property is script mode document.write (the background color of the <strong> selector is ' a.test ' (backgroundcolor) is:</strong> <br/> "); document.write ("<strong> Grammar: </strong>getcssvalue" (' a.test ', ' backgroundcolor '); <br/> "); document.write ("<strong> results:</strong>" + getcssvalue (' a.test ', ' backgroundcolor ') + "<br/>"); document.write ("IE returns the property value directly, but FireFox returns the RGB value"); </script>

IE and FireFox will automatically add some rules, such as you only define BORDER:1PX solid #eee; they automatically add BorderTop, BorderBottom, borderleft, borderright values, two on the return value. Browser processing methods are also different, such as color, FireFox will return color values in RGB format, and IE directly return the property values in the rule, but these do not affect the application of the