title: Is looping through all style sheets and classes a good idea in JavaScript?
body: <p>I have a JavaScript function as given in code below, in an ASP.Net WebForms page i.e. in an aspx page.</p>
  
  <p>The code implements the logic I need in my app i.e. to find a css class, but I am concerned that if there are many style sheets/classes then there could be too many iterations done resulting in slower performance on client-side.</p>
  
  <p>In this code, first all style sheets are obtained, and then for each style sheet all classes are obtained which are then iterated to find a given class.</p>
  
  <p><strong>Question</strong>: Is this concern about slow performance valid when there are too many style sheets/classes, and if yes, is there a quicker way to find a css class using JavaScript?</p>
  
  <pre><code>function getStyle(className) {
  
  var styleSheets = document.styleSheets;
  var styleSheetsLength = styleSheets.length;
  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++) {
          if (classes[x].selectorText === undefined) {
              continue;
          }
          if (classes[x].selectorText == className || classes[x].selectorText.indexOf(className) &gt;= 0) {
              if (classes[x].cssText) {
                  return classes[x].cssText;
              } else {
                  return classes[x].style.cssText;
              }
          }
      }
    }
  }
  </code></pre>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>I am providing some code from my app to illustrate the use of above JavaScript method. I have no control over which classes are being used since they are coming from some third-party controls in the ASP.Net page.</p>
  
  <pre><code> if ("none" === getStyleAttribute(getStyle(".rwDialog"), "background-image")) {
                          allDivs[i].style.paddingLeft = "5px";
                      }
  </code></pre>