JQuery में चौड़ाई, इनरव्हीड और आउटरविद्थ, ऊंचाई, इनरहाइट और आउटरहाइट के बीच क्या अंतर है


124

मैंने यह देखने के लिए कुछ उदाहरण लिखे कि क्या अंतर है, लेकिन वे मुझे चौड़ाई और ऊंचाई के लिए समान परिणाम दिखाते हैं।

<html>
    <head>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                var div = $('.test');
                var width = div.width(); // 200 px
                var innerWidth = div.innerWidth(); // 200px
                var outerWidth = div.outerWidth(); // 200px

                var height = div.height(); // 150 px
                var innerHeight = div.innerHeight(); // 150 px
                var outerHeight = div.outerHeight(); // 150 px
            });

        </script>
        <style type="text/css">
            .test
            {
                width: 200px;
                height: 150px;
                background: black;
            }
        </style>
    </head>
    <body>
        <div class="test"></div>
    </body>
</html>

इस उदाहरण में आप देख सकते हैं कि वे समान परिणाम देते हैं। अगर किसी को पता है कि क्या अंतर है तो कृपया मुझे उचित उत्तर दिखाएं।

धन्यवाद।


8
क्या आपने jQuery प्रलेखन को देखा?
ब्रैड एम

1
पैडिंग, बॉर्डर और मार्जिन को अपने साथ जोड़ने की कोशिश करें <div>, और देखें कि क्या अलग परिणाम देता है?)
नीट द डार्क एबोल

4
api.jquery.com/category/dimensions वह पृष्ठ उन सभी का वर्णन करता है, और यदि आप प्रत्येक क्लिक करते हैं तो और भी अधिक जानकारी मिलती है।
21

मैंने Google में खोज की है, लेकिन कोई भी उत्तर मेरी अपेक्षाओं को पूरा नहीं करता है।
जजके

@ ब्रैडम - कोई आदमी नहीं। लेकिन "चौड़ाई, इनरव्हीड, आउटरविद जक्वेरी" के बीच अंतर के लिए परिणाम मुझे अनिवार्य रूप से कुछ भी नहीं बताता है।
जजके २४'१३

जवाबों:


282

क्या आपने ये उदाहरण देखे? अपने प्रश्न के समान दिखता है।

चौड़ाई और ऊंचाई के साथ काम करना

यहाँ छवि विवरण दर्ज करें

jQuery - आयाम

jQuery: ऊंचाई, चौड़ाई, आंतरिक और बाहरी


1
सबसे अच्छा जवाब कभी
बेंजामिन

मैंने अभी नीचे एक उत्तर पोस्ट किया है, अब मैं उन दो विकल्पों के बीच एक अलग व्यवहार देख रहा हूं जो आपके विवरण से
अवगत

16

जैसा कि एक टिप्पणी में उल्लेख किया गया है, प्रलेखन आपको बताता है कि अंतर क्या हैं। लेकिन सारांश में:

  • इनरव्हीड / इनरहाइट - में पैडिंग शामिल है लेकिन सीमा नहीं
  • आउटरविद / आउटरहाइट - में पैडिंग, बॉर्डर और वैकल्पिक रूप से मार्जिन शामिल हैं
  • ऊँचाई / चौड़ाई - तत्व की ऊँचाई (कोई पैडिंग, कोई मार्जिन, कोई सीमा नहीं)

4
  • चौड़ाई = चौड़ाई प्राप्त करें,

  • भीतरी = चौड़ाई प्राप्त करें + पैडिंग,

  • आउटरविद = चौड़ाई प्राप्त करें + पैडिंग + बॉर्डर और वैकल्पिक रूप से मार्जिन

यदि आप अपने .test वर्गों में कुछ पैडिंग, मार्जिन, सीमाओं को जोड़ना चाहते हैं और फिर से प्रयास करना चाहते हैं।

इसके अलावा jQuery डॉक्स में पढ़ें ... आपको जो कुछ भी चाहिए वह बहुत ज्यादा है


2

मान असाइनमेंट के बारे में बताना और jq में "चौड़ाई" पैरामीटर के अर्थ के बारे में तुलना करना आवश्यक लगता है: (मान लें कि new_value को px इकाई में परिभाषित किया गया है)

jqElement.css('width',new_value);
jqElement.css({'width: <new_value>;'});
getElementById('element').style.width= new_value;

तीन निर्देश समान प्रभाव नहीं देते हैं: क्योंकि पहला jquery निर्देश तत्व की आंतरिकता को परिभाषित करता है और "चौड़ाई" को नहीं। यह मुश्किल है।

समान प्रभाव प्राप्त करने के लिए आपको पहले पेडिंग की गणना करनी चाहिए (मान लें कि var पैड है), jquery के लिए शुद्ध js (या css पैरामीटर 'चौड़ाई') के समान परिणाम प्राप्त करने का सही निर्देश है:

jqElement.css('width',new_value+pads);

हम यह भी नोट कर सकते हैं कि:

var w1 = jqElement.css('width');
var w2 = jqelement.width();

w1 इनरव्यू है, जबकि w2 चौड़ाई (css विशेषता अर्थ) अंतर है जो JQ API डॉक्यूमेंटेशन में दर्ज़ नहीं है।

सादर

तिहरा


नोट: मेरी राय में इसे बग JQ के रूप में माना जा सकता है। 1.12.4 बाहर जाने का रास्ता निश्चित रूप से .cs ('पैरामीटर', मान) के लिए स्वीकृत मापदंडों की एक सूची पेश करना चाहिए क्योंकि 'पैरामीटर' के पीछे विभिन्न अर्थ हैं। स्वीकार किया जाता है, जिसमें रुचि है लेकिन हमेशा स्पष्ट होना चाहिए। इस स्थिति के लिए: 'इनरऑर्डर' का अर्थ 'चौड़ाई' के समान नहीं होगा। हम इस समस्या के ट्रैक को वाक्य के साथ (। वैल्यू) के दस्तावेज़ीकरण में पा सकते हैं: "ध्यान दें कि आधुनिक ब्राउज़रों में, सीएसएस चौड़ाई संपत्ति में पैडिंग शामिल नहीं है"


जोड़ा गया मोड़: के .css('width')रूप में ही है .outerWidth()(यह है, यह सीमा के साथ ही गद्दी भी शामिल है) box-sizing: border-box;
बॉब स्टीन

0

ऊपर दिए गए सभी उत्तरों से सहमत हैं। बस खिड़की या ब्राउज़र की संभावनाओं के संदर्भ में जोड़ने के लिए innerWidth/ innerheightसिर्फ खिड़की सामग्री क्षेत्र शामिल है, और कुछ नहीं, लेकिन

outerWidth/ outerHeight इसमें विंडोज़ सामग्री क्षेत्र शामिल है और इसके अलावा इसमें टूलबार, स्क्रोलबार आदि जैसी चीजें भी शामिल हैं ... और ये मूल्य हमेशा इनरव्हीड / इनरहाइट मूल्यों के बराबर या अधिक होंगे।

आशा है कि यह अधिक मदद करता है ...


0

अभी मैं जो देख रहा हूं, उसमें innerWidthपूरी सामग्री शामिल है

यह है, अगर खिड़की है 900pxऔर सामग्री है 1200px(और एक स्क्रॉल है)

  • innerWidth मुझे देता है 1200px
  • outerWidth मुझे देता है 900px

मेरी नजर में पूरी तरह से अप्रत्याशित

* मेरे मामले में सामग्री एक में निहित है <iframe>

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.