javascript - How to check if a class exists in CSS with jQuery - Stack Overflow

admin管理员组

文章数量:1367154

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.

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.

• javascript
• jquery
• css

Share Improve this question Follow edited Aug 27, 2019 at 6:06 nazifa rashid 1,50411 gold badge1111 silver badges2020 bronze badges asked Jan 11, 2016 at 7:40 Hai TienHai Tien 3,11788 gold badges3939 silver badges6363 bronze badges 7

• 3 stackoverflow./questions/983586/… – Milind Anantwar Commented Jan 11, 2016 at 7:51
• I need jquery solution. If you have answer, please place it below. – Hai Tien Commented Jan 11, 2016 at 7:53
• you can iterate over all stylesheets using document.styleSheets. check for rules and selector text in it. – Milind Anantwar Commented Jan 11, 2016 at 8:07
• This might help stackoverflow./questions/983586/… – 4dgaurav Commented Jan 11, 2016 at 8:08
• Mr. 4dgaurav, Please have a look on first ment. – Sarower Jahan Commented Jan 11, 2016 at 8:18

 |  Show 2 more ments

5 Answers 5

Sorted by: Reset to default 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
}

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.

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

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./jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

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

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

Simpler still..

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

本文标签： javascriptHow to check if a class exists in CSS with jQueryStack Overflow