jQuery: ऊंचाई() एक सीमा बॉक्स

Question

इसके लिए में jQuery API ने कहा:

ध्यान दें कि .height() हमेशा बॉक्स आकार सीएसएस के मूल्य की सामग्री ऊंचाई वापस आ जाएगी, भले ही संपत्ति। jQuery 1.8 के रूप में, यह सीएसएस ऊंचाई प्लस बॉक्स आकार देने वाली संपत्ति और को पुनर्प्राप्त करने की आवश्यकता हो सकती है, तो प्रत्येक तत्व पर किसी भी संभावित सीमा और पैडिंग को घटाकर तत्व में बॉक्स आकार का होता है: सीमा-बॉक्स। इस जुर्माना से बचने के लिए, .height() के बजाय .css ("ऊंचाई") का उपयोग करें।

मैं निम्न उदाहरण

<div id='wrapper' class='boxA'> 
    <div class='boxB'> 
    Test 
    </div> 
</div> 

की कोशिश की सीएसएस

.boxA{ 
    padding: 20px; 
    background-color: yellow; 
    box-sizing: border-box; 
    margin: 50px; 
} 

.boxB{ 
    height: 50px; 
    background-color: red; 
} 

साथ jQuery एपीआई मुझे यकीन है कि

$('#wrapper').height($('#wrapper').height()); 

boxA की ऊंचाई सेट होता था के अनुसार 50px तक (क्योंकि सामग्री-ऊंचाई 50px है) लेकिन मैं foun डी कि ऊंचाई 90px पर सेट किया गया था। लेकिन अगर मैं का उपयोग

$('#wrapper').css('height', $('#wrapper').height()+"px"); 

boxA की ऊंचाई 50px हो जाता है और इसलिए सिकुड़ता है। पहली विधि 50px ऊंचाई का उत्पादन क्यों नहीं कर रही है?

इसके अलावा

, आदेश

$('#wrapper').height($('#wrapper').css('height')); 

130px लेकिन $('#wrapper').css('height') रिटर्न 90. यहाँ क्या हुआ के लिए boxA की ऊंचाई सेट होगा?

आप इन उदाहरणों को jFiddle में पा सकते हैं।

Answer 1

jQuery एपीआई का कहना है

ध्यान दें कि .height() हमेशा सामग्री ऊंचाई वापस आ जाएगी, भले ही सीएसएस बॉक्स आकार संपत्ति के मूल्य का ।

इसका मतलब है कि $('#wrapper').height() 50px है (के बाद से boxA की सामग्री से ऊंचाई 50px है) और $('#wrapper').css('height') गुणित 90px है एक border-box के लिए और (क्योंकि आप 20px के एक शीर्ष गद्दी और 20px के नीचे गद्दी है) ऊंचाई सामग्री-ऊंचाई + पैडिंग + सीमा द्वारा दी जाती है।इसके अलावा एपीआई कहा गया है कि

ध्यान दें कि .height (मान) बॉक्स की सामग्री ऊंचाई सेट परवाह किए बिना सीएसएस बॉक्स आकार संपत्ति के मूल्य का ।

इस प्रकार, यदि एक

$('#wrapper').height($('#wrapper').height()); 

का उपयोग करता है तो सामग्री से ऊंचाई 50px पर सेट हो जाएगा, लेकिन यह है कि height=90px का तात्पर्य के बाद से आप एक border-box है, क्योंकि ऊंचाई सामग्री ऊंचाई + गद्दी + है सीमा (20 पीएक्स की दो बार पैडिंग जोड़ना)।

यह भी आदेश गुणित 90px करने के लिए सामग्री-ऊंचाई बदलने के लिए अपनी दूसरी उदाहरण

$('#wrapper').height($('#wrapper').css('height')); 

पर लागू होता है, आपके border-box की कुल ऊंचाई गुणित 90px + 20px + 20px = 130px होना चाहिए।

इसलिए, सब कुछ ठीक है।

Answer 2

.height() ऐसा लगता है कि हमेशा content-box से मापा जाता है, लेकिन जब नया मान लागू करने के लिए यह box-sizing का सम्मान करता है, तो यह बॉक्स के रूप में सेटिंग्स के आराम करने के content-box मूल्य मापा जोड़ने है border-box की स्थापना की है।

आप डेमो पर content-box को box-sizing बदलते हैं, तो ऐसा बिल्कुल वैसा ही व्यवहार करेंगे (सभी मामलों में प्रत्येक बॉक्स के लिए 50px सेट हो जाएगा, और content-box मूल्य के साथ सभी बक्से गुणित 90px होगा)।