jQuery css() Method

jQuery | css() Method: Learn about the jQuery css() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 14, 2022

css() Method

CSS – Cascading Style Sheet is a way of styling the HTML webpage and making is look more attractive and user-friendly.

CSS can be added to an HTML page using different ways. One way of adding CSS is by defining it in the same tag where it has to be added. This is called inline CSS. Another way is by declaring the <style> tag in the head and defining all the CSS styling by classes, ids, and tag names. This is called internal CSS. The last way is by creating a new file with a .css extension and defining everything over there, and then link that file to the HTML page. This is termed external CSS.

This styling of the webpage using CSS can be handled using jQuery also. Some changes can be made to the CSS properties, also if one wants to remove or add new CSS completely then that can also be achieved. The jQuery css() method helps to do a lot of things.

Get CSS

css() is an inbuilt jQuery method that helps to set or get the CSS properties of an element. If the property has already been declared for the element, then by using this we a return the specific property we need. For this, the specific property name is given. It gives the CSS property of the first matched element.

Syntax

$('selector').css('property');

jQuery css() Method Example 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h2>jQuery - CSS</h2>
    <p>Click the following button to get the CSS of the following.</p>
    <button>Get CSS</button>
    <hr>
    <div style="color: seagreen; font-size: larger; font-weight: bolder;">WELCOME TO INCLUDE HELP !!!</div>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            var css = $('div').css('color');
            $('h3').html('CSS Color of div is: ' + css);
        })
    });
  </script>
</html>

Output:

Set CSS

If we wish to style the element using jQuery, then using css() we can achieve this. If we need to set a particular property, then along with the property name, the property value is also specified. It sets the CSS property for all the matched elements.

Syntax

$('selector').css('property','value');

jQuery css() Method Example 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h2>jQuery - CSS</h2>
    <p>Click the following button to get the CSS of the following.</p>
    <button>Get CSS</button>
    <hr>
    <div style="color: seagreen; font-size: larger; font-weight: bolder;">WELCOME TO INCLUDE HELP !!!</div>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('div').css('color','#C66102');
            
        })
    });
  </script>
</html>

Output:

Set Multiple CSS

Similarly, multiple CSS properties can be defined using this css() method. While declaring various properties, we make use of curly brackets and differentiate the properties with a comma.

Syntax

$('selector').css({'prop1':'val1', 'prop2':'val2',...});

jQuery css() Method Example 3

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <h2>jQuery - CSS</h2>
    <p>Click the following button to get the CSS of the following.</p>
    <button>Get CSS</button>
    <hr>
    <div style="color: seagreen; font-size: larger; font-weight: bolder;">WELCOME TO INCLUDE HELP !!!</div>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('div').css({'color':'#C66102', 'font-size':'60px'});
            
        })
    });
  </script>
</html>

Output:

jQuery text() Method

jQuery before() Method

Comments and Discussions!

Load comments ↻