jquery-remove-css – Extreme Web Designs https://theextremewebdesigns.com/blog Web Design and Web Development Mon, 30 Jul 2012 15:39:22 +0000 en-US hourly 1 https://wordpress.org/?v=6.7.5 156673191 jQuery Remove CSS From Div Examples https://theextremewebdesigns.com/blog/jquery-remove-css-remove-css-from-div-using-jquery-example/ https://theextremewebdesigns.com/blog/jquery-remove-css-remove-css-from-div-using-jquery-example/#respond Mon, 30 Jul 2012 15:39:22 +0000 https://theextremewebdesigns.com/blog/?p=1095 If you have always wondered how to remove CSS using jQuery, then you have come to the right place. In this article, I am going share very easy way to remove CSS from DIV or any element using jQuery. Read on to find out more.

Examples to Remove CSS from DIV using jQuery

To demonstrate on how to remove css from Div or any other element in a web page, here is an example. I have a div with ID “my_div” and it has three classes applied to it. The green class makes the text color green. Red class applies red background color to the div and the blue class applies blue border to the div. Now I want to remove the red class upon body load so that the background color does not turn to red.

Example: Remove CSS from Div using jQuery on Page load using jQuery

<html>
<head>
<title>jQuery Remove CSS from Div or any element</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<style type="text/css">
.green {
	color:#090;	
}
.red {
	background-color: #F00;
}
.blue {
	padding: 5px;
	border: 2px solid #09F;
}
</style>
</head>

<body>

<div id="my_div" class="green red blue">This is my div with multiple css. We are removing "red" class on page load.</div>

<script type="text/javascript" language="javascript" >
$(document).ready(function(){

	$("#my_div").removeClass('red');

});	
</script>

</body>
</html>

In the above, if you comment the jQuery code and view the page, you will notice that the green text color, red background & blue border are applied, whereas when the code is uncommented, it removes the red background  color.

So that’s how you use jQuery to remove CSS from a Div. Simple, isn’t it?

Your Turn!

Do you know of any other ways to remove CSS from a Div or any other element using jQuery? Feel free to suggest by commenting below.

]]> https://theextremewebdesigns.com/blog/jquery-remove-css-remove-css-from-div-using-jquery-example/feed/ 0 1095