53

Is there a way to determine whether or not a css class exists using JavaScript?

5
  • 2
    What do you mean by a class exists? That there is at least one element with that class or that there is at least one CSS rule that is applied on elements with that class?
    – Gumbo
    Jun 11, 2009 at 20:53
  • 2
    Sorry, I mean... Does the class definition exist in the browser's memory? In other words, has the class been defined internally or in a loaded stylesheet?
    – gidmanma
    Jun 11, 2009 at 20:57
  • hey I know it's an old question but did you find a code to solve this?I 've been trying for hours with no luck.Thanks
    – cssGEEK
    Jun 22, 2016 at 22:13
  • I believe I ended up writing something myself using the accepted answer. It's been a long time though. I haven't had access to that code base in years. Sorry.
    – gidmanma
    Jun 23, 2016 at 22:48
  • 1
    Solutions that loops stylesheets don't work well in Chrome and Firefox, which have same-origin check. The code is unable to read a stylesheet from another domain!
    – Gqqnbig
    Aug 22, 2016 at 23:27

11 Answers 11

36

This should be possible to do using the document.styleSheets[].rules[].selectorText and document.styleSheets[].imports[].rules[].selectorText properties. Refer to MDN documentation.

9
  • 6
    Use the google cache link to see the Expert Exchange answer or do the search for "JavaScript: Checking if a CSS class exists" in Google to go there. Expert exchange is a little anal about showing answers you either need a Google referrer or use the Google Cache (otherways may work, but these i know!) 209.85.229.132/… Jun 11, 2009 at 21:41
  • Thanks, I found that link earlier and tried looking at the google cache but apparently didn't scroll far enough down the page. The first few responses all had the "register to view" text on them.
    – gidmanma
    Jun 11, 2009 at 21:50
  • Code is listed on the link in Shadi's comment above. Basically you troll through the selectors in memory looking for the selector text. Thanks Helen Thanks Shadi
    – gidmanma
    Jun 11, 2009 at 21:52
  • 7
    The experts-exchange secret is to just keep scrolling. The answers are there below all their "sign up now!" text. Jun 11, 2009 at 21:55
  • 2
    @AshBlue: Looks like EE changed their website design. Try the archive.org version: web.archive.org/web/20071210160927/http://…. Alternatively, you can view answers on the "live" site by spoofing your user agent string to look like Googlebot (e.g. using Firefox's User Agent Switcher extension).
    – Helen
    Apr 12, 2013 at 8:25
14
function getAllSelectors() { 
    var ret = [];
    for(var i = 0; i < document.styleSheets.length; i++) {
        var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
        for(var x in rules) {
            if(typeof rules[x].selectorText == 'string') ret.push(rules[x].selectorText);
        }
    }
    return ret;
}


function selectorExists(selector) { 
    var selectors = getAllSelectors();
    for(var i = 0; i < selectors.length; i++) {
        if(selectors[i] == selector) return true;
    }
    return false;
}
3
  • 1
    doesn't work very well, at least on chrome.. 1. opened developer console (f12). 2. pasted the function getAllSelectors(). 3. called it right here on this page, all I got was: [".wmd-snippet-button span", ".wmd-snippet-button:hover span", "#newsletter-ad", "#newsletter-ad-header", "#newsletter-ad ul", "#newsletter-ad ul li", "#newsletter-signup-container", "#newsletter-preview-container", "#newsletter-email-input"]. <-- (this is obviously not all the selectors on this page)
    – Ronen Ness
    Aug 27, 2015 at 21:15
  • Does not returns css rules from included stylesheets
    – user5147563
    Mar 17, 2017 at 21:08
  • Got: Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules
    – Nathan B
    Jul 18, 2021 at 12:41
5

Based on the answer, I created a javascript function for searching for a CSS class in the browser's memory -

var searchForCss = function (searchClassName) {
  for (let i = 0; i < document.styleSheets.length; i++) {
    let styleSheet = document.styleSheets[i];
    try {
      for (let j = 0; j < styleSheet.cssRules.length; j++) {
        let rule = styleSheet.cssRules[j];
        // console.log(rule.selectorText)
        if (rule.selectorText && rule.selectorText.includes(searchClassName)) {
          console.log('found - ', rule.selectorText, ' ', i, '-', j);
        }
      }
      if (styleSheet.imports) {
        for (let k = 0; k < styleSheet.imports.length; k++) {
          let imp = styleSheet.imports[k];
          for (let l = 0; l < imp.cssRules.length; l++) {
            let rule = imp.cssRules[l];
            if (
              rule.selectorText &&
              rule.selectorText.includes(searchClassName)
            ) {
              console.log('found - ',rule.selectorText,' ',i,'-',k,'-',l);
            }
          }
        }
      }
    } catch (err) {}
  }
};

searchForCss('my-class-name');

This will print a line for each occurrence of the class name in any of the rules in any of the stylesheets.

Ref - Search for a CSS class in the browser memory

4

Here is my solution to this. I'm essentially just looping through document.styleSheets[].rules[].selectorText as @helen suggested.

/**
 * This function searches for the existence of a specified CSS selector in a given stylesheet.
 *
 * @param (string) styleSheetName - This is the name of the stylesheet you'd like to search
 * @param (string) selector - This is the name of the selector you'd like to find
 * @return (bool) - Returns true if the selector is found, false if it's not found
 * @example - console.log(selectorInStyleSheet ('myStyleSheet.css', '.myClass'));
 */    

function selectorInStyleSheet(styleSheetName, selector) {
    /*
     * Get the index of 'styleSheetName' from the document.styleSheets object
     */
    for (var i = 0; i < document.styleSheets.length; i++) {
        var thisStyleSheet = document.styleSheets[i].href ? document.styleSheets[i].href.replace(/^.*[\\\/]/, '') : '';
        if (thisStyleSheet == styleSheetName) { var idx = i; break; }
    }
    if (!idx) return false; // We can't find the specified stylesheet

    /*
     * Check the stylesheet for the specified selector
     */
    var styleSheet = document.styleSheets[idx];
    var cssRules = styleSheet.rules ? styleSheet.rules : styleSheet.cssRules;
    for (var i = 0; i < cssRules.length; ++i) {
        if(cssRules[i].selectorText == selector) return true;
    }
    return false;
}

This function offers a speed improvement over other solutions in that we are only searching the stylesheet passed to the function. The other solutions loop through all the stylesheets which is in many cases unnecessary.

4
  • 1
    Checking idx for an undefined value should be better done with if(typeof idx != 'undefined'), otherwise an 0 value of idx would be omitted.
    – SeDav
    Nov 27, 2014 at 12:38
  • Put the value of document.styleSheets.length in a variable.
    – Codebeat
    Apr 3, 2016 at 21:25
  • jQuery.Deferred exception: Cannot read property 'length' of null TypeError: Cannot read property 'length' of null
    – user5147563
    Mar 17, 2017 at 21:28
  • @Soaku this answer doesn't use jquery... not sure where your error is coming from.
    – circuitry
    Apr 6, 2017 at 4:33
3

/* You can loop through every stylesheet currently loaded and return an array of all the defined rules for any selector text you specify, from tag names to class names or identifiers.

Don't include the '#' or '.' prefix for an id or class name.

Safari used to skip disabled stylesheets, and there may be other gotchas out there, but reading the rules generally works better across browsers than writing new ones. */

function getDefinedCss(s){
    if(!document.styleSheets) return '';
    if(typeof s== 'string') s= RegExp('\\b'+s+'\\b','i'); // IE capitalizes html selectors 

    var A, S, DS= document.styleSheets, n= DS.length, SA= [];
    while(n){
        S= DS[--n];
        A= (S.rules)? S.rules: S.cssRules;
        for(var i= 0, L= A.length; i<L; i++){
            tem= A[i].selectorText? [A[i].selectorText, A[i].style.cssText]: [A[i]+''];
            if(s.test(tem[0])) SA[SA.length]= tem;
        }
    }
    return SA.join('\n\n');
}

getDefinedCss('p')//substitute a classname or id if you like

the latest item in the cascade is listed first.

2

Add this Condition Above

if (!document.getElementsByClassName('className').length){
    //class not there
}
else{
//class there
}

If want to check on a element Just use

element.hasClassName( className );

also you can use on a ID

document.getElementById("myDIV").classList.contains('className');

Good Luck !!!

2
  • 1
    In your example you check if an element has the class. It doesn't tell you if the class is defined in a stylesheet.
    – Codebeat
    Apr 3, 2016 at 21:28
  • 2
    Also, your edit doesn't make any sense because you are searching for an element with the classname 'className' in the DOM (the page). You are not searching the CSS, searching for a rule, to check if a rule exist.
    – Codebeat
    Apr 4, 2016 at 19:26
1

Building on Helen's answer, I came up with this:

//**************************************************************************
//** hasStyleRule
//**************************************************************************
/** Returns true if there is a style rule defined for a given selector.
 *  @param selector CSS selector (e.g. ".deleteIcon", "h2", "#mid")
 */
  var hasStyleRule = function(selector) {

      var hasRule = function(selector, rules){
          if (!rules) return false;
          for (var i=0; i<rules.length; i++) {
              var rule = rules[i];
              if (rule.selectorText){ 
                  var arr = rule.selectorText.split(',');
                  for (var j=0; j<arr.length; j++){
                      if (arr[j].indexOf(selector) !== -1){
                          var txt = trim(arr[j]);
                          if (txt===selector){
                              return true;
                          }
                          else{
                              var colIdx = txt.indexOf(":");
                              if (colIdx !== -1){
                                  txt = trim(txt.substring(0, colIdx));
                                  if (txt===selector){
                                      return true;
                                  }
                              }
                          }
                      }
                  }
              }
          }
          return false;
      };

      var trim = function(str){
          return str.replace(/^\s*/, "").replace(/\s*$/, "");
      };

      for (var i=0; i<document.styleSheets.length; i++){
          var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
          if (hasRule(selector, rules)){
              return true;
          }

          var imports = document.styleSheets[i].imports;
          if (imports){
              for (var j=0; j<imports.length; j++){
                  rules = imports[j].rules || imports[j].cssRules;
                  if (hasRule(selector, rules)) return true;
              }
          }
      } 

      return false;
  };
0

You could check and see if an object of the style your are looking for already exists. If it does then the css class must exist because an object is using it. For example if you wanted to make sure that distinctly named svg objects each have their own style:

function getClassName(name) {
    //Are there any elements which use a style named 'name' ?
    if (document.getElementsByClassName(name).length === 0){
        //There are none yest, let's make a new style and add it
        var style = document.createElement('style');
        style.type = 'text/css';
        //Where you might provide your own hash function or rnd color
        style.innerHTML = '.'+name+' { fill: #' + getHashColor(name) + '; background: #F495A3; }';
        //Add the style to the document
        document.getElementsByTagName('head')[0].appendChild(style);
        }
        return name;
    }

Note that this is NOT a good approach if you are looking for a style which isn't necessarily used in your document.

0
if ($(".class-name").length > 0) {

}

That is a nice way to check the class in HTML by using javascript

1
0

Oneliner:

[].slice.call(document.styleSheets)
.reduce( (prev, styleSheet) => [].slice.call(styleSheet.cssRules))
.reduce( (prev, cssRule) => prev + cssRule.cssText)
.includes(".someClass")
1
  • [].slice.call( document.styleSheets ) .reduce((last, currentStyleSheet) => [] .slice .call( currentStyleSheet.cssRules ) ) .reduce((last, currentCssRule) => last + currentCssRule.cssText ) .includes(".name") in firefox gives error SecurityError: The operation is insecure. Apr 27, 2020 at 7:21
0
function getAllSelectors() {
  var ret = {};
  for(var i=0;i<document.styleSheets.length;i++){
    try {
      var rules = document.styleSheets[i].rules || document.styleSheets[i].cssRules;
      for(var x in rules) {
        if(typeof rules[x].selectorText === 'string'){
          if(ret[rules[x].selectorText] === undefined){
            ret[rules[x].selectorText] = rules[x].style.cssText;
          }
          else {
            ret[rules[x].selectorText] = ret[rules[x].selectorText] + ' ' + rules[x].style.cssText;
          }
        }
      }    
    }
    catch(error){
      console.log(document.styleSheets[i]);
    }
  }
  return ret;
}
function selectorExists(selector) {
  var selectors = getAllSelectors();
  if(selectors[selector] !== undefined){
    return true;
  }
  return false;
}
// var allSelectors = getAllSelectors();
1
  • This is an adaption of Cau Guanabara's code.
    – SYNAIKIDO
    Mar 6, 2021 at 18:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.