jQuery
सीएसएस हेरफेर
खोज…
वाक्य - विन्यास
- .cs (cssProperty) // प्रदान की गई CSS संपत्ति मान प्राप्त करें
- .css ([cssProperty, ...]) // cssProperties के सरणी से मान प्राप्त करें
- .css (cssProperty, value) // मान सेट करें
- .cs ({cssProperty: value, ...}) // गुण और मान सेट करें
- .css (cssProperty, function) // कॉलबैक फ़ंक्शन के लिए cssProperty को उजागर करें
टिप्पणियों
मूल्यों का प्रतिपादन किया
यदि एक उत्तरदायी इकाई का उपयोग किया जाता है (जैसे "auto" , "%" , "vw" आदि), .css() px में वास्तविक रेंडर किए गए मान को लौटा देगा।
.myElement{ width: 20%; }
var width = $(".myElement").css("width"); // "123px"
स्वरूपण गुण और मूल्य
गुणों को मानक CSS फॉर्मेटिंग को स्ट्रिंग के रूप में या कैमलकेस के उपयोग से परिभाषित किया जा सकता है
"margin-bottom"
marginBottom
स्ट्रिंग में मान व्यक्त किया जाना चाहिए। संख्यात्मक मूल्यों को jQuery द्वारा आंतरिक रूप से px इकाइयों के रूप में माना जाता है
.css(fontSize: "1em")
.css(fontSize: "16px")
.css(fontSize: 16) // px will be used
JQuery 3 के रूप में .show() और .hide() का उपयोग करने से बचें
इस jQuery के ब्लॉग पोस्ट के अनुसार, ओवरहेड और प्रदर्शन के मुद्दों के कारण, आपको अब .show() या .hide() का उपयोग नहीं करना चाहिए।
यदि आपके पास एक स्टाइलशीट में ऐसे तत्व हैं जो
display: noneकरने के लिए सेट किए गएdisplay: none,.show()विधि अब ओवरराइड नहीं करेगी। तो jQuery 3.0 पर जाने के लिए सबसे महत्वपूर्ण नियम यह है:display: noneके डिफ़ॉल्ट को सेट करने के लिए एक स्टाइलशीट का उपयोग न करेंdisplay: noneऔर.show()का उपयोग करने का प्रयास करें - या कोई भी तरीका जो तत्वों को दिखाता है, जैसे कि.slideDown()और.fadeIn()- इसे दृश्यमान बनाने के लिए। यदि आपको डिफ़ॉल्ट रूप से छिपे रहने के लिए एक तत्व की आवश्यकता है, तो सबसे अच्छा तरीका है कि तत्व में "छिपा हुआ" जैसे वर्ग का नाम जोड़ें और उस वर्ग कोdisplay: noneकरने के लिए परिभाषित करेंdisplay: noneएक स्टाइलशीट में नहीं। फिर आप दृश्यता को नियंत्रित करने के लिए jQuery के.addClass()और.removeClass()विधियों का उपयोग करके उस वर्ग को जोड़ या हटा सकते हैं। वैकल्पिक रूप से, आप पहले से ही.ready()हैंडलर कॉल.hide()तत्वों को पृष्ठ पर प्रदर्शित करने से पहले कर सकते हैं। या, यदि आपको वास्तव में स्टाइलशीट डिफ़ॉल्ट को बनाए रखना चाहिए, तो आप स्टाइलशीट को ओवरराइड करने के लिए.css("display", "block")(या उपयुक्त डिस्प्ले वैल्यू) का उपयोग कर सकते हैं।
CSS संपत्ति सेट करें
केवल एक शैली सेट करना:
$('#target-element').css('color', '#000000');
एक ही समय में कई शैलियों की स्थापना:
$('#target-element').css({
'color': '#000000',
'font-size': '12pt',
'float': 'left',
});
सीएसएस संपत्ति प्राप्त करें
एक तत्व सीएसएस संपत्ति पाने के लिए आप .css(propertyName) विधि का उपयोग कर सकते हैं:
var color = $('#element').css('color');
var fontSize = $('#element').css('font-size');
वेतन वृद्धि / न्यूमेरिक गुण
संख्यात्मक सीएसएस गुणों को क्रमशः .css() विधि का उपयोग करके += और -= सिंटैक्स के साथ बढ़ाया और घटाया जा सकता है:
// Increment using the += syntax
$("#target-element").css("font-size", "+=10");
// You can also specify the unit to increment by
$("#target-element").css("width", "+=100pt");
$("#target-element").css("top", "+=30px");
$("#target-element").css("left", "+=3em");
// Decrementing is done by using the -= syntax
$("#target-element").css("height", "-=50pt");
CSS - गेटर्स और सेटर्स
सीएसएस Getter
.css() गेट्टर फ़ंक्शन को निम्न की तरह पृष्ठ पर प्रत्येक DOM तत्व पर लागू किया जा सकता है:
// Rendered width in px as a string. ex: `150px`
// Notice the `as a string` designation - if you require a true integer,
// refer to `$.width()` method
$("body").css("width");
यह पंक्ति निर्दिष्ट तत्व की गणना की गई चौड़ाई को वापस कर देगी, प्रत्येक कोष्ठक में आपके द्वारा प्रदान की गई प्रत्येक सीएसएस संपत्ति इस $("selector") DOM तत्व के लिए संपत्ति का मूल्य देगी, यदि आप CSS विशेषता के लिए पूछते हैं जो आपके पास मौजूद नहीं है प्रतिक्रिया के रूप में undefined हो जाएगा।
आप विशेषताओं की एक सरणी के साथ CSS गेटर को भी कॉल कर सकते हैं:
$("body").css(["animation","width"]);
यह उनके मूल्यों के साथ सभी विशेषताओं की एक वस्तु लौटाएगा:
Object {animation: "none 0s ease 0s 1 normal none running", width: "529px"}
सीएसएस सेटर
.css() सेटर विधि को पृष्ठ के प्रत्येक DOM तत्व पर भी लागू किया जा सकता है।
$("selector").css("width", 500);
इस कथन ने $("selector") की width 500px निर्धारित की और jQuery ऑब्जेक्ट को लौटाया ताकि आप निर्दिष्ट चयनकर्ता को अधिक विधियों की श्रृंखला दे सकें।
.css() सेटर का उपयोग सीएसएस गुणों और मानों की एक वस्तु को पास करने के लिए भी किया जा सकता है:
$("body").css({"height": "100px", width:100, "padding-top":40, paddingBottom:"2em"});
सभी परिवर्तन किए गए सेटर को DOM तत्व style संपत्ति में जोड़ा गया है, इस प्रकार तत्वों की शैलियों को प्रभावित करता है (जब तक कि शैली संपत्ति मूल्य पहले से ही परिभाषित नहीं किया जाता है) शैलियों में कहीं और !important है।