If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
किसी भी element पर CSS apply करने के लिए jQuery हमें css() method provide करती है जिसकी help से हम easily css apply कर सकते हैं, या सिर्फ property का name pass करके style property get कर सकते हैं।
/*for only single style property*/
css('property', 'value');Explain : जब हमें सिर्फ single style property add करनी हो तो , simply property name और value pass की जाती है।
File : jquery_css.html
<!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>Background color will be change .
जब हमें multiple css property add करनी हो तो , तब हमें एक Object pass करना पड़ता है , जो key : value pair में css property और उसकी value को contain करता है।
css({
'property1' : 'value1',
'property2' : 'value2'
});File : jquery_multi_css.html
<!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>Background color will be change .