How to check an element has certain CSS style using jQuery ?

0 0 2 minutes read

Given an HTML document containing some CSS property and the task is to check whether an element has a specific CSS style or not with the help of jQuery.

Approach 1: Use css() method to check an element contains certain CSS styles or not.

Example: This example uses css() method to check an element contains certain CSS style or not.

<!DOCTYPE HTML>   
<html>   
  
<head>  
    <title>  
       How to check an element has certain 
       CSS style using jQuery ? 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head> 
  
<body style = "text-align:center;">   
      
    <h1 style="color:green"> 
        GeeksForGeeks   
    </h1> 
      
    <p id = "GFG_UP" style =  
        "font-size: 15px; font-weight: bold;"> 
    </p> 
      
    <button onclick = "GFG_Fun()"> 
        click here 
    </button> 
      
    <p id = "GFG_DOWN" style = 
        "color:green; font-size: 20px; font-weight: bold;"> 
    </p> 
      
    <script>  
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var n = 1/0; 
          
        up.innerHTML = "Click on the button to check" 
                + " if H1 has style, color = green."; 
          
        function GFG_Fun() { 
            if ($("#h1").css("color") == "rgb(0, 128, 0)") { 
                down.innerHTML = "H1 has CSS style, color: green"; 
            } else {     
                down.innerHTML = "H1 has not CSS style, color: green"; 
            } 
        } 
    </script>  
</body>   
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Approach 2: Use hasClass() method to check an element contains certain CSS styles or not.

Example: This example uses hasClass() method to check an element contains certain CSS style or not.

<!DOCTYPE HTML>   
<html>   
  
<head>  
    <title>  
        How to check an element has certain 
        CSS style using jQuery ? 
    </title> 
      
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head> 
  
<body style = "text-align:center;">   
      
    <h1 style="color:green;">   
        GeeksForGeeks 
    </h1> 
      
    <p id = "GFG_UP" style =  
        "font-size: 15px; font-weight: bold;"> 
    </p> 
      
    <button onclick = "GFG_Fun()"> 
        click here 
    </button> 
      
    <p id = "GFG_DOWN" class = "color" style = 
        "font-size: 20px; font-weight: bold;"> 
    </p> 
      
    <script>  
        var up = document.getElementById('GFG_UP'); 
        var down = document.getElementById('GFG_DOWN'); 
        var n = 1/0; 
          
        up.innerHTML = "Click on the button to check if" 
                + " P[id = GFG_DOWN] has style, color =" 
                + " green using class."; 
          
        function GFG_Fun() { 
            if ($("#GFG_DOWN").hasClass('color')) { 
                down.innerHTML =  
                "P[id = GFG_DOWN] has CSS style, color: green"; 
            } else {     
                down.innerHTML =  
                "P[id = GFG_DOWN] has not CSS style, color: green"; 
            } 
        } 
    </script>  
</body>   
  
</html> 

Output:

Before clicking on the button:
After clicking on the button:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!