किसी भी element पर CSS apply करने के लिए jQuery हमें css() method provide करती है जिसकी help से हम easily css apply कर सकते हैं, या सिर्फ property का name pass करके style property get कर सकते हैं।


jQuery css Syntax

/*for only single style property*/
css('property', 'value');

Explain : जब हमें सिर्फ single style property add करनी हो तो , simply property name और value pass की जाती है।

jQuery css Example

File : jquery_css.html

CopyFullscreenClose Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery css() Example </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>	
  <body>
  	<p id="target_elm">Background color will be change .</p>
    <button id="target_btn">Change Background.</button>
    <script> 
		$(document).ready(function(){
		  	$("#target_btn").click(function() {
		  		$('#target_elm').css('background-color', 'green');
		  	});
		});
	</script>
  </body>
</html>
Output

Background color will be change .


jQuery Set Multiple css Property

जब हमें multiple css property add करनी हो तो , तब हमें एक Object pass करना पड़ता है , जो key : value pair में css property और उसकी value को contain करता है।

Syntax
css({
    'property1' : 'value1',
    'property2' : 'value2'
});

Example

File : jquery_multi_css.html

CopyFullscreenClose Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery css() Example </title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>	
  <body>
  	<p id="target_elm2">Background color will be change .</p>
    <button id="target_btn2">Click Here.</button>
    <script> 
		$(document).ready(function(){
		  	$("#target_btn2").click(function() {
		  		$('#target_elm2').css({
                                   'background-color' : 'green',
                                   'padding-top' : '3px',
                                   'padding-bottom' : '3px',
                                   'color' : 'white'
                               });
		         });
		});
	</script>
  </body>
</html>
Output

Background color will be change .

Hey ! I'm Rahul founder of learnhindituts.com. Working in IT industry more than 4.5 years. I love to talk about programming as well as writing technical tutorials and blogs that can help to others .... keep learning :)

Get connected with me - LinkedIn Twitter Instagram Facebook