CSS Rules Get और Set करना
In this page:
$(selector).css("property");
$(selector).css("property", "value");
$(selector).css({ property1: "value1", property2: "value2" });CSS Values पढ़ना
सिर्फ एक property name के साथ .css(property) call करना बिना कुछ बदले उस style की current computed value को एक string के रूप में return करता है। यह actual rendered style को reflect करता है, किसी stylesheet से inherited values सहित, सिर्फ आपने खुद set की गई inline styles नहीं।
उदाहरण: Reading CSS Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text" style="color: blue;">Text</p>
<script>
console.log($("#text").css("color"));
</script>
</body>
</html>एक CSS Property Set करना
किसी element पर सीधे एक CSS rule बदलने के लिए css() को एक property name और एक value pass करें, जैसे उसका color या display set करना। jQuery बदलाव को inline style की तरह लागू करता है, जो ज़्यादातर stylesheet rules से priority रखता है।
उदाहरण: Setting One CSS Property
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").css("color", "red");
</script>
</body>
</html>कई CSS Properties Set करना
जब आप एक ही call में कई properties बदलना चाहें, तो css() को property/value pairs का एक object pass करें, जैसे color, background, और padding एक साथ set करना। यह related style changes के लिए कई अलग css() calls chain करने से बचाता है।
उदाहरण: Setting Multiple CSS Properties
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text">Text</p>
<script>
$("#text").css({color: "white", background: "black", padding: "10px"});
</script>
</body>
</html>Relative Values इस्तेमाल करना
css() से set होने पर कुछ CSS properties += और -= जैसी relative values accept करती हैं, आपको किसी numeric style को उसकी current value के relative बढ़ाने या घटाने देते हुए। यह पहले खुद value पढ़े बिना animations या incremental adjustments के लिए काम का है।
उदाहरण: Using Relative Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="font-size:16px">Box</div>
<script>
$("#box").css("font-size", "+=4px");
</script>
</body>
</html>कई CSS Values पढ़ना
आप property names की एक array के साथ css() call करके उसी element से कई CSS properties पढ़ सकते हैं, एक साथ सभी requested values का एक object वापस पाते हुए। यह कई styles को साथ में inspect करना ज़रूरी होने पर कई अलग calls करने से बचाता है।
उदाहरण: Reading Several CSS Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p id="text" style="color:blue;font-size:18px">Text</p>
<script>
console.log($("#text").css(["color", "font-size"]));
</script>
</body>
</html>.css("width")पढ़ना और इसे एक number की तरह treat करना, जबकि यह"200px"जैसी एक string return करता है; एक number के लिए.width()इस्तेमाल करें।- किसी object literal में बिना quotes के hyphenated names इस्तेमाल करना, जैसे
{background-color: "red"}, जो एक syntax error है। .css("margin")जैसा shorthand पढ़ना और एक खाली या browser-specific result पाना, जबकिmargin-topजैसी individual properties ज़्यादा safe हैं।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: