Add CSS Properties to an Element Using jQuery

In this jQuery tutorial we will learn how to add css properties to any element (div / span / paragraph etc.) using jQuery.

Using jQuery css() method, we can add new CSS properties to any element.

Syntax

For adding just one css property, use below syntax.


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

For adding multiple css properties, use below syntax.


$('element').css({
  'property-one': 'value',
  'property-two': 'value'
  }
);

Example

In below example, I am going to change the color of text under div of class newcolor to blue.


<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Add CSS Properties Using jQuery</title>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $('.newcolor').css('color', 'blue');
    })
    </script>
  </head>
  <body>
    <div class="newcolor">This text is blue color</div>
  </body>
</html>

Demo

Demo – Add CSS Properties to an Element using jQuery

Tutorial Category

jQuery