December 17, 2015

How To Add CSS Class Using jQuery

To add CSS class using jQuery, you only need to use addClass method. In the sample code given below, we are adding CSS class myStyle to a DIV element using function divClass().

<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial </title>

<script src="http://code.jquery.com/jquery-latest.js"></script>


<!-- CSS Class --> 
<style type="text/css">
 
.myStyle
{
    background-color:red;
    color:white;
    font-weight: bold;    
}
 </style>
 
 <!-- jQuery Code to add CSS Class -->
<script type="text/javascript">
 
 function divClass(){
    
    $('#divHello').addClass('myStyle');
 }

</script>
 
</head>
<body>
<input type="button" value="Add Class" onclick="divClass()"/>
<br />
<br />
<div id="divHello" >
Hello World!
</div>
 
</body>
</html>

You May Also Like: