dojox.data.CssRuleStore

Status:Contributed, Draft
Version:1.0
Available:since V1.2

CssRuleStore is a read interface to the CSS rules loaded in the current page. Rules can be selected based on several different filterable attributes outlined below. Which CSS rules are indexed can be determined by a context provided to the store at the time of creation. This store is useful for reading the CSS rules that are loaded and in effect on the page.

API Support

  • dojo.data.api.Read

Constructor Parameters

The constructor for CssRuleStore allows for one optional parameter.

Name Description Type
context An array of strings, each being a pattern to match on the paths of loaded stylesheets, indicating which rules to index. Array

Item Attributes

selector The selector text (for example, ‘.class’)
classes An array of strings representing the classes present in this selector (for example, if the selector is ‘.class1, .class2’, the result would be [‘class1’, ‘class2’])
rule The DOM Rule object as provided by the browser
style The DOM CSSStyleDeclaration object as provided by the browser
cssText The cssText string from the Rule object, provided by the browser
styleSheet The DOM Stylesheet object this rule came from
parentStyleSheet The parent stylesheet to the sheet this rule came from. May be null (if the rule came from a <style> block, for instance).
parentStyleSheetHref The url to the parent stylesheet. May be null.

Query Syntax

The query syntax is identical to dojo.data.ItemFileReadStore. Please refer to it for the format of the queries.

Examples

Programmatic construction of a ComboBox to browse rules

<script>
  dojo.require("dojox.data.CssRuleStore");
  dojo.require("dijit.form.ComboBox");

  function init() {
    var ruleStore = new dojox.data.CssRuleStore({'context': ['dijit/themes/nihilo/nihilo.css']});
    var ruleCombo = new dijit.form.ComboBox({'store': ruleStore, 'searchAttr': 'selector'}, dojo.byId('ruleCombo'));

    function setCssText() {
       var item = ruleCombo.item;
       var text = dojo.byId("textLoc");
       if (text) {
         while(text.firstChild){
           text.removeChild(text.firstChild);
         }
         if (item) {
            text.innerHTML = ruleStore.getValue(item, "cssText");
         }
       }else {console.log("foo!")}
    }
    dojo.connect(ruleCombo, "onChange", setCssText);
  }
  dojo.addOnLoad(init);
</script>
<b>Combo lookup of selectors (scoped to nihilo.css)</b>
<br>
<br>
<div id="ruleCombo"></div>
<br>
<br>
<b>The css text associated with the rule: </b>
<br>
<span id="textLoc"></span>
<br>
<br>
Error in the documentation? Can’t find what you are looking for? Let us know!