की पूर्ण ऊंचाई प्राप्त करें मैं div की ऊंचाई कैसे प्राप्त करूं जिसमें div के clipped क्षेत्र शामिल हैं?एक क्लिप डीआईवी
<div style="height: 20px; overflow: hidden">
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
</div>
ठीक है, आप इसे उस तरह से नहीं कर सकते हैं, लेकिन जब तक आपके कंटेनर में एक आंतरिक तत्व जोड़, इस तरह यह संभव है:
<div id="element" style="height: 20px; overflow: hidden;">
<p id="innerElement"> <!-- notice this inner element -->
content<br />content<br />content<br />
content<br />content<br />content<br />
content<br />content<br />content<br />
</p>
</div>
sidenote: पैराग्राफ अंदर रैपिंग सामग्री, भी एक अच्छा अभ्यास है प्लस कि एक अतिरिक्त तत्व, समस्याओं की इतनी अधिक राशि नहीं दे रहा है, यदि कोई हो सब पर ...
और जावास्क्रिप्ट:
var innerHeight = document.getElementById('innerElement').offsetHeight;
alert(innerHeight);
पीएस इस जावास्क्रिप्ट को काम करने के लिए, इसे अपने #element div के बाद डालें, क्योंकि डीओएम तैयार होने से पहले सादे जावास्क्रिप्ट को निष्पादित किया जाता है यदि इसे ऐसा करने का निर्देश नहीं दिया जाता है। डोम तैयार होने पर यह काम करने के लिए, check this।
लेकिन मैं jQuery प्राप्त करने का सुझाव देना चाहता हूं, यदि आप अपनी साइट पर जावास्क्रिप्ट ऑपरेशंस का विस्तार करने जा रहे हैं तो यह बाद में आसान होगा।
प्लस, jQuery शक्ति है, वास्तविक के लिए!
इस तरह से, बस अपने <head /> (यह मानते हुए आप jQuery शामिल किया है) को यह स्क्रिप्ट जोड़ने:
$(document).ready(function() {
var innerHeight = $('#innerElement').height();
alert(innerHeight);
});
हाँ। ऐसा लगता है कि यह करने का सबसे अच्छा तरीका है। धन्यवाद। ओह और हाँ, मुझे jQuery पसंद है। लवली पुस्तकालय –
युक्ति: (यह मुझे अभी पकड़ा गया है) यदि आप ऊंचाई या ऑफसेट से 0 लौटते रहें, तो सुनिश्चित करें कि मापने से पहले आपने अपने तत्वों को दिखाना सेट कर दिया है। –
यह करने का यह एक शानदार तरीका है। धन्यवाद! – Rook777
संभव नहीं है। आप उस शैली को हटाने और ऊंचाई प्राप्त करने के बाद जावास्क्रिप्ट का उपयोग करके इसे सेट करने का प्रयास कर सकते हैं। सबसे सुरुचिपूर्ण समाधान नहीं है, लेकिन मुझे लगता है कि यह केवल एक ही है।
मैंने उस विचार को मांस और हड्डियों को दिया, आईएमओ यह एक समारोह में अच्छी तरह से लपेटकर पर्याप्त सुरुचिपूर्ण है। :) –
यहाँ एक तरह से प्राप्त करने के लिए आपको क्या चाहिए, फैबियन विचार का उपयोग कर रहा है:
function GetHeight() {
var oDiv = document.getElementById("MyDiv");
var sOriginalOverflow = oDiv.style.overflow;
var sOriginalHeight = oDiv.style.height;
oDiv.style.overflow = "";
oDiv.style.height = "";
var height = oDiv.offsetHeight;
oDiv.style.height = sOriginalHeight;
oDiv.style.overflow = sOriginalOverflow;
alert("Real height is " + height);
}
लाइव डेमो और परीक्षण का मामला: http://jsfiddle.net/yahavbr/7Lbz9/
हाँ, यह होगा। हालांकि उम्मीद थी कि ऊंचाई की गणना करने से पहले मुझे ओवरफ़्लो को हटाने की आवश्यकता नहीं होगी। –
दरअसल, यह मेरी समस्या को पूरी तरह से हल करने के लिए होता है, क्योंकि जिस गति पर ओवरफ़्लो सेट/रीसेट किया जाता है, वह स्क्रॉल –
@Prakash में नहीं डालता है क्योंकि मैं केवल एक चर सेट कर रहा हूं, फिर मूल ओवरफ़्लो और ऊंचाई वापस सेट करता हूं, यह हो जाता है सीपीयू के एक "टिक" के भीतर उपयोगकर्ता को यूआई में कोई बदलाव नहीं दिखाई देगा। –
यह सभी मामलों में काम करता है, भले ही आपके पास एक टेक्स्ट नोड या कंटेनर हो। यह jquery का उपयोग कर रहा है, लेकिन आपको इसकी आवश्यकता नहीं है।
//return the total height.
totalHeight = $('#elem')[0].scrollHeight;
//return the clipped height.
visibleHeight = $('#elem').height();
$ ('# elem') [0] jquery कॉल से डोम तत्व लौटा रहा है। तो आप सादा ओल 'जावास्क्रिप्ट का उपयोग कर किसी भी डोम elem पर इसका उपयोग कर सकते हैं।
बेहतर दृष्टिकोण की तलाश करने वाले किसी भी व्यक्ति के लिए स्वीकृत उत्तर छोड़ने और @ कोल्ट उत्तर का प्रयास करने के लिए। –
इसके अलावा उत्तर jQuery का उपयोग करता है, और इस प्रश्न ने jQuery के बारे में कुछ भी नहीं पूछा। – L0j1k
मुझे लगता है कि बिंदु 'scrollHeight' के उपयोग में था ... नहीं * jQuery * – Giraldi