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.

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

Answer 2

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

Answer 3

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> 

Answer 4

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.

Answer 5

Simpler still..

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