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 lt classes length x              if classes x  selectorText  className                  this is where I can collect the style information  but how                    getStyle   test

User · Answer

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

User · Answer

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    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                   Here s it in action from the Chrome console

User · Answer

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

User · Answer

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

User · Answer

works in IE  not sure about other browsers     alert classes x  style cssText

User · Answer

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    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                   Here s it in action from the Chrome console

User · Answer

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    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN      http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt       lt style gt      div a         div b  div c          lt  style gt       lt script gt      function PrintRules         var rules   document styleSheets 0  rules    document styleSheets 0  cssRules         for var x 0 x lt rules length x                  document getElementById  rules   innerHTML    rules x  selectorText     lt br   gt                         lt  script gt   lt  head gt   lt body gt       lt input onclick  PrintRules    type  button  value  Print Rules    gt  lt br   gt      RULES       lt div id  rules  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

Here is code to iterate through all rules in a page    x000D   x000D  function iterateCSS f    x000D    for  const styleSheet of window document styleSheets    x000D      const classes   styleSheet rules    styleSheet cssRules  x000D      if   classes  continue  x000D   x000D      for  const cssRule of classes    x000D        if  cssRule type     1     cssRule style  continue  x000D        const selector   cssRule selectorText  style cssRule style  x000D        if   selector     style cssText  continue  x000D        for  let i 0  i lt style length  i      x000D          const propertyName style item i   x000D          if  f selector  propertyName  style getPropertyValue propertyName   style getPropertyPriority propertyName   cssRule    false  return  x000D          x000D        x000D      x000D    x000D   x000D  iterateCSS   selector  propertyName  propertyValue  propertyPriority  cssRule    gt    x000D    console log selector       propertyName      propertyValue  propertyPriority    important       important               x000D      x000D   x000D   x000D

User · Answer

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

User · Answer

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    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN      http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt       lt style gt      div a         div b  div c          lt  style gt       lt script gt      function PrintRules         var rules   document styleSheets 0  rules    document styleSheets 0  cssRules         for var x 0 x lt rules length x                  document getElementById  rules   innerHTML    rules x  selectorText     lt br   gt                         lt  script gt   lt  head gt   lt body gt       lt input onclick  PrintRules    type  button  value  Print Rules    gt  lt br   gt      RULES       lt div id  rules  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

works in IE  not sure about other browsers     alert classes x  style cssText

User · Answer

Adapted from here  building on scunliffe s answer   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

User · Answer

Adapted from here  building on scunliffe s answer   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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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  lt  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  lt  ll  x                   var selector   classes x  selectorText                    var content   classes x  cssText    classes x  style cssText                        if the selector matches             if   startingWith  amp  amp  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  gt  0   result   null      I m using this in production as part of the pure-form project  Hope it helps

User · Answer

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  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                                                     Notice  The selector must be the same as in the CSS

User · Answer

Here is code to iterate through all rules in a page    x000D   x000D  function iterateCSS f    x000D    for  const styleSheet of window document styleSheets    x000D      const classes   styleSheet rules    styleSheet cssRules  x000D      if   classes  continue  x000D   x000D      for  const cssRule of classes    x000D        if  cssRule type     1     cssRule style  continue  x000D        const selector   cssRule selectorText  style cssRule style  x000D        if   selector     style cssText  continue  x000D        for  let i 0  i lt style length  i      x000D          const propertyName style item i   x000D          if  f selector  propertyName  style getPropertyValue propertyName   style getPropertyPriority propertyName   cssRule    false  return  x000D          x000D        x000D      x000D    x000D   x000D  iterateCSS   selector  propertyName  propertyValue  propertyPriority  cssRule    gt    x000D    console log selector       propertyName      propertyValue  propertyPriority    important       important               x000D      x000D   x000D   x000D

User · Answer

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

User · Answer

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    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN      http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt       lt style gt      div a         div b  div c          lt  style gt       lt script gt      function PrintRules         var rules   document styleSheets 0  rules    document styleSheets 0  cssRules         for var x 0 x lt rules length x                  document getElementById  rules   innerHTML    rules x  selectorText     lt br   gt                         lt  script gt   lt  head gt   lt body gt       lt input onclick  PrintRules    type  button  value  Print Rules    gt  lt br   gt      RULES       lt div id  rules  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

works in IE  not sure about other browsers     alert classes x  style cssText

User · Answer

Adapted from here  building on scunliffe s answer   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

User · Answer

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

User · Answer

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  lt  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  lt  ll  x                   var selector   classes x  selectorText                    var content   classes x  cssText    classes x  style cssText                        if the selector matches             if   startingWith  amp  amp  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  gt  0   result   null      I m using this in production as part of the pure-form project  Hope it helps

User · Answer

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

User · Answer

const getStyle   query   gt      document querySelector query  computedStyleMap   entries    map e  gt  e 1      e   map e  gt e join         join  n    In one line  prints out generated css for any query

User · Answer

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  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                                                     Notice  The selector must be the same as in the CSS

User · Answer

I made a similar helper  function  which shows the unneeded styles for this page  appends a  lt div gt  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 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

User · Answer

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

User · Answer

Adapted from here  building on scunliffe s answer   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

User · Answer

works in IE  not sure about other browsers     alert classes x  style cssText

User · Answer

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    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN      http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt   lt head gt       lt style gt      div a         div b  div c          lt  style gt       lt script gt      function PrintRules         var rules   document styleSheets 0  rules    document styleSheets 0  cssRules         for var x 0 x lt rules length x                  document getElementById  rules   innerHTML    rules x  selectorText     lt br   gt                         lt  script gt   lt  head gt   lt body gt       lt input onclick  PrintRules    type  button  value  Print Rules    gt  lt br   gt      RULES       lt div id  rules  gt  lt  div gt   lt  body gt   lt  html gt

User · Answer

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

User · Answer

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

User · Answer

const getStyle   query   gt      document querySelector query  computedStyleMap   entries    map e  gt  e 1      e   map e  gt e join         join  n    In one line  prints out generated css for any query

User · Answer

I made a similar helper  function  which shows the unneeded styles for this page  appends a  lt div gt  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 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

[javascript] How do you read CSS rule values with JavaScript?

Examples related to javascript

Examples related to html

Examples related to css