JQuery CSS

From CoderLearner
Jump to: navigation, search

Description

  • Apply the CSS property using jQuery method.

Syntax

SELECTOR.css(CSS_PROPERTY_NAME, CSS_PROPERTY_VALUE);

Example 1

  • Set the div content property to have the blue background color.
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS Example 1</title>
		<script 
			type="text/javascript" 
			src="jquery.min.js">
					
		</script>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				$('div#mycontent').css('background-color','blue'); 
			});
		</script>
	</head>
	<body>
		<div id="mycontent">Hello CSS jQuery</div>
	</body>
</html>

Multiple CSS properties

  • You can set multiple CSS properties.

Syntax

SELECTOR.css(
          {
             Name_1:Value_1,
             Name_2:Value_2,
             Name_3:Value_3
          });

Example 2

Multiple CSS Properties.

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS Example 1</title>
		<script 
			type="text/javascript" 
			src="jquery.min.js">
					
		</script>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
			       $('div#mycontent').css({
					'background-color':'blue',
					'font-size':'25',
					'color':'white'}); 
			});
		</script>
	</head>
	<body>
		<div id="mycontent">Hello CSS jQuery</div>
	</body>
</html>

Assign CSS property using jQuery addClass method

  • Require to define the CSS stylesheet first before assign in the addClass method.

Syntax

SELECTOR.addClass(CSS);

Example 3

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Using addClass</title>
		<script 
			type="text/javascript" 
			src="jquery.min.js">
					
		</script>
		<style type="text/css">
			.myCss {
				font-size: 18px;
				border: 2px solid #06b;
			}
		</style>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				$('div#mycontent').addClass('myCss');			
			});
		</script>
	</head>
	<body>
		<div id="mycontent">Learning jQuery @ w3cyberlearnings dot com</div>
	</body>
</html>

Remove CSS stylesheet property with removeClass method

  • removeClass method uses to remove the CSS stylesheet class.

Syntax

  SELECTOR.removeClass(CSS);

Example 4

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Using addClass</title>
		<script 
			type="text/javascript" 
			src="jquery.min.js">
					
		</script>
		<style type="text/css">
			.myCss {
				font-size: 18px;
				border: 2px solid #06b;
			}
		</style>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {				                                      
                           $('div#mycontent')
                                .addClass('myCss')
                                .removeClass('myCss');			
			});
		</script>
	</head>
	<body>
		<div id="mycontent">Learning jQuery @ w3cyberlearnings dot com</div>
	</body>
</html>

Example 5

addClass and removeClass.

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>CSS Example</title>
		<script 
			type="text/javascript" 
			src="jquery.min.js">
					
		</script>
		<style type="text/css">
			.css1 {
				font-size: 18px;
				border: 2px solid #06b;
			}
			.css2 {
				color:red;
				background-color:green;
			}
		</style>
		<script type="text/javascript" language="javascript">
			$(document).ready(function() {
				$('#mybtn_add').click(function(){
					$('div#mycontent').addClass('css1');
					$('div#mycontent').removeClass('css2');
				});
				$('#mybtn_remove').click(function(){
					$('div#mycontent').addClass('css2');
					$('div#mycontent').removeClass('css1');
				});		
			});
		</script>
	</head>
	<body>
		<button id="mybtn_add">Add</button>
		<button id="mybtn_remove">Remove</button>
		<div id="mycontent">Learning jQuery @ w3cyberlearnings dot com</div>
	</body>
</html>