वेनिला जावास्क्रिप्ट का उपयोग करके div की चौड़ाई कैसे पता करें?

Question

आप jQuery जैसी लाइब्रेरी का उपयोग किए बिना<div> क्रॉस-ब्राउज़र संगत तरीके से वर्तमान की चौड़ाई कैसे पा सकते हैं ?

Comments

+1 "नो jQuery" टिप्पणी के लिए :)

— Zlatko

अंडरस्टैंडिंग ऑफसेटविदथ, क्लायंटवीड, स्क्रॉलविद और -हाईट के संभावित डुप्लिकेट , क्रमशः (जो, वास्तव में, बहुत बाद में पूछा गया है, लेकिन अभी भी अधिक विस्तृत जवाब है )।

Answer 1

document.getElementById("mydiv").offsetWidth

• element.offsetWidth (MDC)

Comments

कि, या cientWidth, मैं असली अंतर नहीं जानता।

— JCOC611

offsetWidthसीमा चौड़ाई शामिल है, clientWidthनहीं।

— lincolnk

जब myDiv में कोई CSS नियम नहीं था, लेकिन टैग में "चौड़ाई" और "ऊँचाई" परिभाषित की गई थी, तो ऑफसेटवेड ने मूल चौड़ाई वापस कर दी। कोई समस्या नहीं है मैंने अभी CSS नियम जोड़ा है और यह ठीक काम किया है।

— लूट

हमेशा शून्य IE11 में offsetHeight

— nim

@nim अगर आपका div है display: noneया दस्तावेज़ का हिस्सा नहीं है, तो इसमें हमेशा शून्य ऑफ़सेट ऊँचाई होगी।

— एंडी ई

Answer 2

आप मोज़िला डेवलपर नेटवर्क संदर्भ का उपयोग clientWidthया उपयोग कर सकते हैंoffsetWidth

यह इस तरह होगा:

document.getElementById("yourDiv").clientWidth; // returns number, like 728

या सीमाओं की चौड़ाई के साथ:

document.getElementById("yourDiv").offsetWidth; // 728 + borders width

Answer 3

सभी उत्तर सही हैं, लेकिन मैं अभी भी कुछ अन्य विकल्प देना चाहता हूं जो काम कर सकते हैं।

यदि आप निर्धारित चौड़ाई (पैडिंग, मार्जिन और इतने पर ध्यान न देते हुए) की तलाश कर रहे हैं, तो आप उपयोग कर सकते हैं।

getComputedStyle(element).width; //returns value in px like "727.7px"

getComputedStyle आपको उस तत्वों की सभी शैलियों का उपयोग करने की अनुमति देता है। उदाहरण के लिए: पेडिंग, पेडिंग लिफ़्ट, मार्जिन, बॉर्डर-टॉप-लेफ्ट-रेडियस और इसी तरह।

Answer 4

आप ClassName का उपयोग करके DOM भी खोज सकते हैं। उदाहरण के लिए:

document.getElementsByClassName("myDiv")

यह एक सरणी लौटाएगा। यदि कोई विशेष संपत्ति है जिसमें आप रुचि रखते हैं। उदाहरण के लिए:

var divWidth = document.getElementsByClassName("myDiv")[0].clientWidth;

divWidth अब आपके div सरणी में पहले तत्व की चौड़ाई के बराबर होगा।

Answer 5

वास्तव में, आप का उपयोग करने की जरूरत नहीं है document.getElementById("mydiv") ।
आप बस div की आईडी का उपयोग कर सकते हैं, जैसे:

var w = mydiv.clientWidth;
या
var w = mydiv.offsetWidth;
आदि।

Answer 6

एक अन्य विकल्प getBoundingClientRect फ़ंक्शन का उपयोग करना है। कृपया ध्यान दें कि getBoundingClientRect तत्व की डिस्प्ले 'कोई नहीं' होने पर एक खाली आयत लौटाएगा।

var elem = document.getElementById("myDiv");
if(elem) {
   var rect = elem.getBoundingClientRect();
   console.log(rect.width);  
}

Answer 7

div या बॉडी टैग onclick = "शो (इवेंट);" फंक्शन शो (इवेंट) {

        var x = event.clientX;
        var y = event.clientY;

        var ele = document.getElementById("tt");
        var width = ele.offsetWidth;
        var height = ele.offsetHeight;
        var half=(width/2);
       if(x>half)
        {
          //  alert('right click');
            gallery.next();
        }
        else
       {
           //   alert('left click');
            gallery.prev();
        }


    }

Answer 8

गणना की गई शैली का सही तरीका पेज के प्रस्तुत होने तक प्रतीक्षा कर रहा है। इसे निम्नलिखित तरीके से किया जा सकता है। autoमूल्यों को प्राप्त करने पर ध्यान दें ।

function getStyleInfo() {
    setTimeout(function() {
        const style = window.getComputedStyle(document.getElementById('__root__'));
        if (style.height == 'auto') {
            getStyleInfo();
        }
        // IF we got here we can do actual business logic staff
        console.log(style.height, style.width);
    }, 100);
};

window.onload=function() { getStyleInfo(); };

अगर आप सिर्फ इस्तेमाल करते हैं

window.onload=function() {
    var computedStyle = window.getComputedStyle(document.getElementById('__root__'));
}

आप autoचौड़ाई और ऊंचाई के लिए मान प्राप्त कर सकते हैं क्योंकि ब्राउज़र पूर्ण लोड के प्रदर्शन तक प्रस्तुत नहीं करता है।