स्पष्ट सीएसएस नियम के बिना डिव ऊंचाई निर्धारित करें

यदि सीएसएस में स्पष्ट रूप से कोई ऊंचाई निर्धारित नहीं है तो डिव की ऊंचाई प्राप्त करना चुनौतीपूर्ण हो सकता है। जबकि .height() jQuery पद्धति का उपयोग आमतौर पर इसके लिए किया जाता है, उचित कार्यक्षमता के लिए इसे मौजूदा CSS नियम की आवश्यकता होती है। यहां एक वैकल्पिक तरीका है:

jQuery ऊंचाई कार्य

jQuery ऊंचाई कार्यों की एक श्रृंखला प्रदान करता है जो सीएसएस ऊंचाई नियमों के बिना भी सटीक ऊंचाई माप प्रदान कर सकता है:

• .height(): पैडिंग, बॉर्डर और को छोड़कर मार्जिन।
• .innerHeight(): में पैडिंग शामिल है लेकिन बॉर्डर और मार्जिन शामिल नहीं है।
• .outerHeight(): बॉर्डर शामिल है लेकिन मार्जिन शामिल नहीं है।
• .outerHeight(true): शामिल है मार्जिन।

उपयोग डेमो

नीचे दिया गया कोड स्निपेट दर्शाता है कि इन फ़ंक्शन का उपयोग कैसे करें:

$(function() {
  var $heightTest = $('#heightTest');
  $heightTest.html('Div style set as "height: 180px; padding: 10px; margin: 10px; border: 2px solid blue;"')
    .append('<p>Height (.height() returns) : '   $heightTest.height()   ' [Just Height]</p>')
    .append('<p>Inner Height (.innerHeight() returns): '   $heightTest.innerHeight()   ' [Height   Padding (without border)]</p>')
    .append('<p>Outer Height (.outerHeight() returns): '   $heightTest.outerHeight()   ' [Height   Padding   Border]</p>')
    .append('<p>Outer Height (.outerHeight(true) returns): '   $heightTest.outerHeight(true)   ' [Height   Padding   Border   Margin]</p>')
});

आउटपुट:

डिव की गणना की गई ऊंचाई डिव में ही प्रदर्शित होती है, जो प्रत्येक फ़ंक्शन के आउटपुट के बारे में विस्तृत जानकारी प्रदान करती है।