Online Snippets Library

How to change CSS using jQuery

To change CSS using jQuery,we use .css() of jQuery.jQuery css() is convenient way to change style of element.

Syntax

.css( propertyName, value ) OR .css( propertyName, function )

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<title>Change CSS using JQuery</title>
</head>
<body>
<div style="border: 1px solid ;" id="divId" >This is a paragraph.</div>
<button>Change property of the div</button>
</body>
</html>
Javascript
$(document).ready(function(){
  $("button").click(function(){
  $("#divId").css("border",function(i){
  return i= i + 25 + "px" + " solid";
    });
    });
});