सादे जावास्क्रिप्ट के साथ div ऊंचाई प्राप्त करें

Question

JQuery का उपयोग किए बिना एक तलाक की ऊंचाई कैसे प्राप्त करें पर कोई विचार?

मैं इस सवाल के लिए स्टैक ओवरफ्लो खोज रहा था और ऐसा लगता है कि हर उत्तर jQuery के लिए इशारा कर रहा है .height()।

मैंने कुछ ऐसा करने की कोशिश की myDiv.style.height, लेकिन यह कुछ भी नहीं लौटा, यहां तक ​​कि जब मेरी डिव ने अपने सीएसएस में सेट widthऔर heightसेट किया था ।

Comments

stackoverflow.com/a/10118190/1172872

— sk8terboi87

संभावित डुप्लिकेट आपको किसी तत्व की प्रदान की गई ऊंचाई कैसे मिलती है?

— पेनी लियू

Answer 1

var clientHeight = document.getElementById('myDiv').clientHeight;

या

var offsetHeight = document.getElementById('myDiv').offsetHeight;

clientHeight पैडिंग शामिल है।

offsetHeight जिसमें पैडिंग, स्क्रोलबार और बॉर्डर शामिल हैं।

Comments

ऑफसेट दूर के wirr पर ie10 के नीचे quirksmode.org/mobile/tableViewport_desktop.html

— डर '26

आप यह भी उपयोग कर सकते हैं scrollHeightजिसमें सम्‍मिलित दस्‍तावेज़ की ऊँचाई, ऊर्ध्वाधर गद्दी और ऊर्ध्वाधर सीमाएँ शामिल हैं।

— सईद ज़बरदस्त

clientHeightभी गद्दी भी शामिल है, तो यह के बराबर नहीं है$.height()

— Eevee

सीमाओं और मार्जिन भी जगह ले रहे हैं। :) और आपके उत्तर का तात्पर्य clientHeightपैडिंग में शामिल नहीं है। और प्रश्न दोनों का उल्लेख है $.height()और .style.heightन तो जिनमें से गद्दी में शामिल हैं, प्रश्नकर्ता सुझाव यह भी नहीं चाहता है।

— ईवे

नोट: ओपी ने उन उत्तरों के लिए नहीं पूछा जो पैडिंग को छोड़कर थे । इसके लिए कोई देशी क्रॉस-प्लेटफ़ॉर्म समाधान नहीं है, जिसके बारे में मुझे जानकारी है।

— डैन

Answer 2

jsFiddle

var element = document.getElementById('element');
alert(element.offsetHeight);

Answer 3

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

उदाहरण:

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

Comments

मुझे लगता है कि यह बेहतर समाधान है

— Intervalia

Answer 4

var myDiv = document.getElementById('myDiv'); //get #myDiv
alert(myDiv.clientHeight);

clientHeight और clientWidth आप के लिए क्या देख रहे हैं।

ऑफसेटहाइट और ऑफसेटविद भी ऊंचाई और चौड़ाई वापस करते हैं लेकिन इसमें सीमा और स्क्रॉलबार शामिल हैं। स्थिति के आधार पर, आप एक या दूसरे का उपयोग कर सकते हैं।

उम्मीद है की यह मदद करेगा।

Answer 5

अन्य जवाब मेरे लिए काम नहीं कर रहे थे। यहाँ है कि मैं क्या w3schools में पाया , divएक heightऔर / या widthसेट है।

आप सभी की जरूरत है heightऔर widthपैडिंग को बाहर करना है।

    var height = document.getElementById('myDiv').style.height;
    var width = document.getElementById('myDiv').style.width;

आप नीचे दिए गए हैं: इस उत्तर ने कम से कम 5 लोगों की मदद की है, जो मेरे द्वारा प्राप्त किए गए अपवोट्स को देखते हुए। यदि आपको यह पसंद नहीं है, तो मुझे बताएं कि मैं इसे ठीक क्यों कर सकता हूं। डाउनवोट्स के साथ मेरा सबसे बड़ा पालतू पेशाब है; आप शायद ही कभी मुझे बताएं कि आप इसे क्यों कम करते हैं।

Comments

यह तब तक काम नहीं करेगा जब तक कि div में एक सेट heightऔर / याwidth

— हॉपकिंस-मैट

मुझे लगा कि यह मान लिया गया है और निहित है। क्या आप मेरे उत्तर में उल्लिखित उस चेतावनी को पसंद करेंगे?

— craned

यह बेहतर है। मैं व्यक्तिगत रूप से अन्य तरीकों को सही नहीं मानूंगा। मैं यह कहने के लिए उद्यम करूंगा कि मेरे पास इसके लिए offsetHeightऔर clientHeightअधिक से अधिक बार उपयोग है style.height।

— हॉपकिंस-मैट

वे मेरे लिए काम नहीं कर रहे थे। इसलिए मैंने यह जवाब पोस्ट किया है।

— craned

मैं नहीं देख सकता कि कैसे w3schools का कहना है कि अन्य तरीके सटीक नहीं हैं।

— aknuds1

Answer 6

<div id="item">show taille height</div>
<script>
    alert(document.getElementById('item').offsetHeight);
</script>

Jsfiddle

Answer 7

el.clientHeightऔर el.offsetHeight, इसके अलावा , जब आपको तत्व के अंदर सामग्री की ऊंचाई की आवश्यकता होती है (भले ही तत्व पर ऊँचाई सेट की परवाह किए बिना) आप उपयोग कर सकते हैं el.scrollHeight। और जानकारी

यह उपयोगी हो सकता है यदि आप तत्व की ऊँचाई या अधिकतम ऊँचाई को उसकी आंतरिक गतिशील सामग्री की सटीक ऊँचाई पर सेट करना चाहते हैं। उदाहरण के लिए:

var el = document.getElementById('myDiv')

el.style.maxHeight = el.scrollHeight+'px'

Comments

किसी को भी आश्चर्य हो, यह ड्रॉपडाउन के लिए सीएसएस संक्रमण करने के लिए बहुत उपयोगी है जिसमें गतिशील ऊंचाई सामग्री है

— क्रोनोकली

Answer 8

प्रयत्न

myDiv.offsetHeight 

console.log("Height:", myDiv.offsetHeight );

#myDiv { width: 100px; height: 666px; background: red}

<div id="myDiv"></div>

Answer 9

यहाँ एक और विकल्प है:

var classElements = document.getElementsByClassName("className");

function setClassHeight (classElements, desiredHeightValue) 
    {
        var arrayElements = Object.entries(classElements);
        for(var i = 0; i< arrayElements.length; i++) {
            arrayElements[i][1].style.height = desiredHeightValue;
        }

    }

Answer 10

एक विकल्प होगा

const styleElement = getComputedStyle(document.getElementById("myDiv"));
console.log(styleElement.height);