jQuery 1.8 बॉक्स-आकार: चौड़ाई (), सीएसएस ("चौड़ाई") और आउटरविद ()

JQuery 1.8 में महान नई सुविधाओं में से एक इसकी अंतर्निहित box-sizing: border-box की समझ है box-sizing: border-box संपत्ति, जो सभी आधुनिक ब्राउज़रों द्वारा समर्थित है। (IE6 और IE7, एक तरफ धूम्रपान करें, जैसा कि मैंने कहा, आधुनिक ब्राउज़रों के साथ।)

नोट: CSS3 के मानक में CSS box-sizing संपत्ति पेश की गई थी और इसमें दो मूल्य हो सकते हैं: content-box - CSS2 मानक से मेल खाती है और डिफ़ॉल्ट मान है, जबकि width और height गुण सामग्री की चौड़ाई और ऊंचाई निर्दिष्ट करते हैं और मान नहीं रखते हैं इंडेंटेशन, मार्जिन और बॉर्डर, border-box का नया मूल्य ब्राउज़र को बताता है कि width और height गुणों में मार्जिन और बॉर्डर के मूल्य शामिल होने चाहिए, लेकिन मार्जिन नहीं।

यदि आप लोगों को स्क्रीन पर सीमाओं के साथ एक तत्व दिखाते हैं और उन्हें तत्व की चौड़ाई को इंगित करने के लिए कहते हैं, तो, निश्चित रूप से, वे इसे सीमा की बाहरी सीमाओं से मानते हैं। लेकिन यह डिफ़ॉल्ट content-box मोड में सीएसएस में काम नहीं करता है। आमतौर पर, सीएसएस में चौड़ाई और ऊंचाई में सीमाओं और क्षेत्रों ( padding ) के अंदर सामग्री की केवल चौड़ाई और ऊंचाई शामिल होती है। नतीजतन, जब लेआउट (और jQuery का उपयोग करके), आपको अक्सर तत्व की "वास्तविक" चौड़ाई प्राप्त करने के लिए बाएं / दाएं मार्जिन और सीमा की चौड़ाई को जोड़ने की आवश्यकता होती है।

box-sizing: border-box का उपयोग करना box-sizing: border-box , CSS में चौड़ाई का प्रतिनिधित्व बदल जाता है, इस मोड में इसमें मार्जिन और सीमाओं की चौड़ाई शामिल है, यह अधिक प्राकृतिक दिखता है। संस्करण 1.8 से पहले jQuery ने border-box के उपयोग का जवाब नहीं दिया, लेकिन हमने इस बग को ठीक कर दिया।

हालाँकि, .width() विधि द्वारा लौटाया गया मान नहीं बदला गया है। जैसा कि प्रलेखन में संकेत दिया गया है, यह तत्व की सामग्री की चौड़ाई को लौटाता है / सेट करता है, और इससे कोई फर्क नहीं पड़ता कि तत्व के लिए box-sizing निर्दिष्ट है या नहीं। हालाँकि, jQuery 1.8 को अब आपके द्वारा उपयोग .width() हर समय box-sizing संपत्ति के मूल्य की जांच करनी चाहिए। यह निर्धारित करने के लिए कि आपको खेतों और सीमाओं के मूल्यों को घटाने की आवश्यकता है। यह एक महंगा ऑपरेशन हो सकता है - क्रोम में 100 गुना अधिक महंगा! सौभाग्य से, अधिकांश कोड उपयोग नहीं करते हैं। .width() इतनी बार कि यह विशेष ध्यान देने योग्य है, लेकिन एक बार में एक दर्जन तत्वों की चौड़ाई प्राप्त करने वाले कोड पर नकारात्मक प्रभाव पड़ सकता है।

आपके कोड के प्रदर्शन पर इस सुविधा के प्रभाव से बचने का एक सरल तरीका है। लागू सीएसएस नियमों के अनुसार तत्व की "वास्तविक" चौड़ाई निर्धारित करने के लिए। .width() .css("width") बजाय .css("width") उपयोग करें। यह box-sizing संपत्ति के मूल्य की जांच करने के लिए jQuery की आवश्यकता नहीं है। लेकिन याद रखें कि कॉलिंग .css("width") अंत में "px" के साथ एक स्ट्रिंग मान देता है, इसलिए जब आप एक परिणाम के रूप में एक संख्यात्मक मूल्य प्राप्त करना चाहते हैं तो आपको parseFloat( $(element).css("width") ) जैसे कुछ का उपयोग करना चाहिए।

और निश्चित रूप से, ऊपर वर्णित सब कुछ प्रदर्शन समस्याओं से बचने के लिए .height() , उपयोग .css("height") पर लागू होता है।

.outerWidth() सेटर का उपयोग करना

अन्य महत्वपूर्ण समाचार: .outerWidth() और .outerHeight() विधियाँ संस्करण 1.8 में अपडेट की गईं ताकि अब उन्हें .outerHeight() रूप में उपयोग किया जा सके। (jQuery UI ने संस्करण 1.8.4 के बाद से इस सुविधा का समर्थन किया है, लेकिन अब यह कर्नेल में भी उपलब्ध है।) .outerWidth() सेटर का उपयोग करने के लिए, आपको तत्व के आवश्यक "पूर्ण" चौड़ाई (सामग्री की चौड़ाई और क्षेत्र की चौड़ाई) को इंगित करते हुए एक तर्क के रूप में पास करना होगा। प्लस सीमाओं की चौड़ाई)। और हाँ, यह विधि box-sizing: border-box के मूल्य को भी ध्यान में रखती है box-sizing: border-box , यह उस स्थिति में .css("width") का उपयोग करने के लिए नीचे आता है।

हमें jQuery 1.8 में .outerWidth() का उपयोग करने में समस्या रखने वाले कुछ लोगों से प्रतिक्रिया मिली, क्योंकि विधि ने संख्यात्मक मान के बजाय एक jQuery वस्तु लौटा दी। यह तब हो सकता है जब आप $(element).outerWidth(0) , उदाहरण के लिए। पिछले संस्करणों में, यह विधि का एक गलत उपयोग है, क्योंकि केवल प्रकार के बूलियन के एक तर्क के उपयोग को प्रलेखित किया गया था और विधि ने चौड़ाई वापस कर दी थी। नए संस्करण में, jQuery मान 0 को चौड़ाई के लिए सेट मान के रूप में समझता है, और इसलिए सेटर के परिणामस्वरूप jQuery ऑब्जेक्ट वापस कर दिया जाता है।

एपीआई प्रलेखन अब jQuery 1.8 में सभी परिवर्तनों के अनुसार अपडेट किया जा रहा है, लेकिन आप पहले से ही jQuery 1.8 घोषणा में बदलावों की सूची देख सकते हैं।