How to check if a class exists in CSS with jQuery

Question

I have class .hello in css:

<style>
    .hello { color:#ccc }
</style>

How can use Jquery to check class .hello exist in style or not?
Of course, it need to check all style even in <link href='style.css' /> document.

http://stackoverflow.com/questions/983586/how-can-you-determine-if-a-css-class-exists-with-javascript — Milind Anantwar, Jan 11 '16 at 07:51
I need jquery solution. If you have answer, please place it below. — Hai Tien, Jan 11 '16 at 07:53
you can iterate over all stylesheets using document.styleSheets. check for rules and selector text in it. — Milind Anantwar, Jan 11 '16 at 08:07
This might help http://stackoverflow.com/questions/983586/how-can-you-determine-if-a-css-class-exists-with-javascript — 4dgaurav, Jan 11 '16 at 08:08

score 1 · Answer 1 · answered Jan 11 '16 at 07:49

1

Following will check if certain styles are applied to the element (doesn't absolutely confirms that whether it came from stylesheet)

if ($('.hello').css('color') == '#CCC') {
   // true
} else {
   // false
}

answered Jan 11 '16 at 07:49

4dgaurav

11,360
4
32
59

You might misunderstood my question. It is only checking a class exist in style document or not. – Hai Tien Jan 11 '16 at 07:50
@MinhAnh yeah, I get your point, this will check for styles that are applied to the element ".hello", so if you have applied any styles in stylesheet to the element it will be true. The thing here is to know before hand that a particular style/styles that are expected to the element and it is present or not, this will certainly give you the idea whether its in stylesheet or not. – 4dgaurav Jan 11 '16 at 07:53

score 1 · Answer 2 · answered Apr 15 '17 at 06:33

See below code snippet, the function returns the found class or id from the stylesheet or from style tag we pass. And returns an empty string if not found.

<script type="text/javascript">
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');
}
       console.log(getDefinedCss ('ui-helper-hidden'));

                  </script>

Let me know if it works for you.

Filjumar Jumamoy · Answer 3 · 2019-08-27T04:02:07.037

1

First specify the external file you want to search an existing class then try to replace whitespaces to "" if string "gap" was found is greater than 0 then class "gap" is found.

  (function($){
            jQuery.get('assets/css/main.css', function(data) {
                var str = data.replace('n','');
                if(str.match(/gap/g).length>0) {
                    console.log('class was found!');
                }else{
                    console.log('no class!');
                }
            });       
        }) (jQuery);

edited Aug 27 '19 at 04:02

answered Aug 16 '19 at 09:07

Filjumar Jumamoy

21
3

Welcome to StackOverflow, when you answer a post it's good to include some explanation as well as code. You appear to be removing every `n`, then searching for the string `gap`? (Were you perhaps trying to remove newlines? `\n` and then search for the class name?) – DBS Aug 16 '19 at 10:49

score 1 · Answer 4 · answered Aug 27 '19 at 04:59

You can use getComputedStyle() for element to get the styles.

Color is obtained as rgba and is converted to hex with the logic here

$('.hello').each((i, el) => {
  if (rgb2hex(getComputedStyle(el).color) == "#cccccc") {
    console.log('#cccccc el => ', el);
  }
});

function rgb2hex(rgb) {
  rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
  return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

function hex(x) {
let hexDigits = new Array("0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f");
  return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
}

.hello {
  color: #cccccc;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

<div class="hello">
  hello
</div>

<div class="hi">
  hi
</div>

score 0 · Answer 5 · answered Dec 10 '21 at 03:36

0

Simpler still..

if($('.<class name>').length <= 0)
{
// load style sheet
$('<link href="style sheet ULR" rel="stylesheet">').appendTo("head");   
}

answered Dec 10 '21 at 03:36

Debbie Kurth

403
3
16

How to check if a class exists in CSS with jQuery

5 Answers5