Is there a way to determine whether or not a css class exists using JavaScript?
-
2What 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?– GumboJun 11, 2009 at 20:53
-
2Sorry, 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?– gidmanmaJun 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– cssGEEKJun 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.– gidmanmaJun 23, 2016 at 22:48
-
1Solutions 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!– GqqnbigAug 22, 2016 at 23:27
11 Answers
This should be possible to do using the document.styleSheets[].rules[].selectorText
and document.styleSheets[].imports[].rules[].selectorText
properties. Refer to MDN documentation.
-
6Use 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.– gidmanmaJun 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– gidmanmaJun 11, 2009 at 21:52
-
7The 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).– HelenApr 12, 2013 at 8:25
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;
}
-
1doesn'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) Aug 27, 2015 at 21:15
-
Does not returns css rules from included stylesheets– user5147563Mar 17, 2017 at 21:08
-
Got: Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules– Nathan BJul 18, 2021 at 12:41
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.
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.
-
1Checking idx for an undefined value should be better done with if(typeof idx != 'undefined'), otherwise an 0 value of idx would be omitted.– SeDavNov 27, 2014 at 12:38
-
-
jQuery.Deferred exception: Cannot read property 'length' of null TypeError: Cannot read property 'length' of null– user5147563Mar 17, 2017 at 21:28
-
@Soaku this answer doesn't use jquery... not sure where your error is coming from. Apr 6, 2017 at 4:33
/* 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.
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 !!!
-
1In your example you check if an element has the class. It doesn't tell you if the class is defined in a stylesheet.– CodebeatApr 3, 2016 at 21:28
-
2Also, 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.– CodebeatApr 4, 2016 at 19:26
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;
};
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.
if ($(".class-name").length > 0) {
}
That is a nice way to check the class in HTML by using javascript
Oneliner:
[].slice.call(document.styleSheets)
.reduce( (prev, styleSheet) => [].slice.call(styleSheet.cssRules))
.reduce( (prev, cssRule) => prev + cssRule.cssText)
.includes(".someClass")
-
[].slice.call( document.styleSheets ) .reduce((last, currentStyleSheet) => [] .slice .call( currentStyleSheet.cssRules ) ) .reduce((last, currentCssRule) => last + currentCssRule.cssText ) .includes(".name")
in firefox gives errorSecurityError: The operation is insecure.
Apr 27, 2020 at 7:21
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();