किसी भी 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 .

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers