Tutorial :How do you read CSS rule values with JavaScript?



Question:

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 .style.width etc.)

The CSS:

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

The code so far:

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) {              //this is where I can collect the style information, but how?          }      }  }  getStyle('.test')  


Solution:1

Adapted from here, building on scunliffe's answer:

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


Solution:2

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

    /**       * 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;                  }              }          }        }  

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


Solution:3

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


Solution:4

Some browser differences to be aware of:

Given the CSS:

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

and given InsDel's example, classes will have 2 classes in FF and 3 classes in IE7.

My example illustrates this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  <head>      <style>      div#a { }      div#b, div#c { }      </style>      <script>      function PrintRules() {      var rules = document.styleSheets[0].rules || document.styleSheets[0].cssRules          for(var x=0;x<rules.length;x++) {              document.getElementById("rules").innerHTML += rules[x].selectorText + "<br />";          }      }      </script>  </head>  <body>      <input onclick="PrintRules()" type="button" value="Print Rules" /><br />      RULES:      <div id="rules"></div>  </body>  </html>  


Solution:5

function getStyle(className) {      document.styleSheets.item("menu").cssRules.item(className).cssText;  }  getStyle('.test')  

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


Solution:6

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

//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*([>~+])\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 => 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 || x.cssRules || []));          const allRules = ruleArrays.reduce((all, x) => all.concat(x), []);          return allRules.filter((x) => containsAny(normalize(x.selectorText), logicalORs));      };  })();  

Here's it in action from the Chrome console.

enter image description here


Solution:7

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

(to be used with the firebug console)

(function getStyles(){var CSSrules,allRules,CSSSheets, unNeeded, currentRule;  CSSSheets=document.styleSheets;    for(j=0;j<CSSSheets.length;j++){  for(i=0;i<CSSSheets[j].cssRules.length;i++){      currentRule = CSSSheets[j].cssRules[i].selectorText;        if(!document.querySelectorAll(currentRule).length){          unNeeded+=CSSSheets[j].cssRules[i].cssText+"<br>";     }          }  }    docBody=document.getElementsByTagName("body")[0];  allRulesContainer=document.createElement("div");  docBody.appendChild(allRulesContainer);  allRulesContainer.innerHTML=unNeeded+isHover;  return false  })()  


Solution:8

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.

//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 = [" ", ".", ",", "#",">","+",":","["];        //loop through all the stylessheets in the bor      for(var i = 0; i < styleSheetsLength; i++){          var classes = styleSheets[i].rules || styleSheets[i].cssRules;          var classesLength = classes.length;          for (var x = 0; x < 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<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;          }  }  

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).

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< 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< 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>0){              arStackElements= arStackElements.concat(currentElement.children().toArray());          }      }        console.log("Found " + Object.keys(existingClassDefinitions).length + " CSS class definitions");      return cssString;  }  

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)


Solution:9

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

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<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) => {    console.log(selector+' { '+propertyName+': '+propertyValue+(propertyPriority==='important' ? ' !important' : '')+' }');  });


Solution:10

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

alert(classes[x].style.cssText);  


Solution:11

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.

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


Solution:12

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

var getClassStyle = function(className){      var x, sheets,classes;      for( sheets=document.styleSheets.length-1; sheets>=0; sheets-- ){          classes = document.styleSheets[sheets].rules || document.styleSheets[sheets].cssRules;          for(x=0;x<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<styleSets.length;y++){                      var style = styleSets[y].match(/\s*([^:;]+):\s*([^;:]+)/);                      if(style.length > 2)                          classStyles[style[1]]=style[2];                  }                  return classStyles;              }          }      }      return false;  };  


Solution:13

I created a version that searches all stylesheets and returns matches as a key/value object. You can also specify startsWith to match child styles.

getStylesBySelector('.pure-form-html', true);  

returns:

{      ".pure-form-html body": "padding: 0; margin: 0; font-size: 14px; font-family: tahoma;",      ".pure-form-html h1": "margin: 0; font-size: 18px; font-family: tahoma;"  }  

from:

.pure-form-html body {      padding: 0;      margin: 0;      font-size: 14px;      font-family: tahoma;  }    .pure-form-html h1 {      margin: 0;      font-size: 18px;      font-family: tahoma;  }  

The code:

/**   * Get all CSS style blocks matching a CSS selector from stylesheets   * @param {string} className - class name to match   * @param {boolean} startingWith - if true matches all items starting with selector, default = false (exact match only)   * @example getStylesBySelector('pure-form .pure-form-html ')   * @returns {object} key/value object containing matching styles otherwise null   */  function getStylesBySelector(className, startingWith) {        if (!className || className === '') throw new Error('Please provide a css class name');        var styleSheets = window.document.styleSheets;      var result = {};        // go through all stylesheets in the DOM      for (var i = 0, l = styleSheets.length; i < l; i++) {            var classes = styleSheets[i].rules || styleSheets[i].cssRules || [];            // go through all classes in each document          for (var x = 0, ll = classes.length; x < ll; x++) {                var selector = classes[x].selectorText || '';              var content = classes[x].cssText || classes[x].style.cssText || '';                // if the selector matches              if ((startingWith && selector.indexOf(className) === 0) || selector === className) {                    // create an object entry with selector as key and value as content                  result[selector] = content.split(/(?:{|})/)[1].trim();              }          }      }        // only return object if we have values, otherwise null      return Object.keys(result).length > 0 ? result : null;  }  

I'm using this in production as part of the pure-form project. Hope it helps.


Solution:14

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

.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%;                                                                                                                                                                                  }  

This will return:

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:

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_) {                  return _.pickBy(classes[x].style, (v, k) => isNaN(parseInt(k)) && typeof(v) == 'string' && v && v != 'initial' && k != 'cssText' )              }          }      }    }  

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »