सादे जावास्क्रिप्ट - clientHeight

Question

मैं निम्नलिखित स्क्रिप्ट है

(function(win){ 
    var doc = win.document; 
    if (doc.querySelector && doc.addEventListener) { 
     var toggler = doc.querySelector('.toggle-menu') 
     var menu = doc.querySelector('.main-nav ul'); 
     menu.style.height = '0px'; 
     toggler.addEventListener('click',function(e) { 
      e.preventDefault(); 
      if (menu.style.height == '0px') { 
       menu.style.height = 'auto'; 
       if (menu.clientHeight != 0) { 
        menu.style.height = menu.clientHeight+'px'; 
       } 
      } else { 
       menu.style.height = '0px'; 
      } 
     }); 
    } 
})(this); 

क्या, कि स्क्रिप्ट के jQuery संस्करण हो जाएगा के बाद से मैं clientHeight करने के लिए एक jQuery बराबर नहीं मिल रहा।

Answer 1

clientHeight एक jQuery संपत्ति नहीं है। यह इंटरनेट एक्सप्लोरर में पेश किया गया था, लेकिन डब्ल्यू 3 सी विनिर्देशों का हिस्सा नहीं है। ऐसा लगता है कि यह केवल फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर में समर्थित है। मैंने अभी परीक्षण किया है कि यह क्रोम के नवीनतम संस्करण में काम करता है, हालांकि। सुनिश्चित नहीं है कि परिणाम ब्राउज़र में मानक हैं, हालांकि नीचे पोस्ट किया गया लिंक कोई सुझाव नहीं देता है।

इसके अलावा, मोज़िला का सुझाव निम्न सूत्र ब्राउज़रों कि इसका समर्थन नहीं करते के लिए जगह में प्रयोग की जाने वाली:

clientHeight सीएसएस ऊंचाई + सीएसएस गद्दी के रूप में गणना की जा सकती - क्षैतिज स्क्रॉलबार की ऊंचाई (मौजूद होने पर)।

मुझे लगता है कि यह तत्व की स्क्रॉलबार है, पूरी ब्राउजर विंडो नहीं, जब तक कि तत्व पूरी विंडो नहीं ले लेता।

सूत्रों का कहना है:

• clientHeight/clientWidth returning different values on different browsers
• https://developer.mozilla.org/en/DOM/element.clientHeight

Answer 2

वहाँ .height() है। यह एक तत्व की ऊंचाई वापस कर देगा।

var menu = $('.main-nav ul'); 
.... 
menu.height()+'px'; 

Answer 3

जहां तक ​​आज - सितंबर वर्ष 2016, मैं देख सकता है कि jQuery (3.1.0 ver) अभी भी विभिन्न ब्राउज़रों करवाते हैं एक सामान्यीकृत तरह से element.clientWidth और element.clientHeight प्राप्त करने के लिए अपने स्वयं के विधि शामिल नहीं है।

फिर भी, विभिन्न स्रोतों पर जांच, यह दिखाता है कि इन जावास्क्रिप्ट मूल गुणों का उपयोग आज के अधिकांश ब्राउज़रों पर पर समर्थित है।
MDN clientHeight article पर मैं इसे पढ़ सकता हूं इसे क्रोम, फ़ायरफ़ॉक्स (गेको), इंटरनेट एक्सप्लोरर, ओपेरा, सफारी (वेबकिट) पर समर्थित है, लेकिन कोई वर्जनिंग निर्दिष्ट नहीं है।

QuirksMode these properties are supported from IE 9+ and other browsers निर्दिष्ट करता है जब window और document ऑब्जेक्ट्स पर लागू होता है।

पृष्ठ तत्वों के लिए आवेदन किया दो गुणों पर एक और quirksmode लेख में, ब्राउज़र समर्थन के बारे में कोई विनिर्देशों दिया जाता है, लेकिन एक बहुत ही उपयोगी ऑन-पेज परीक्षक ब्राउज़रों आप पर तत्व आयाम स्थिरता खुद के द्वारा परीक्षण करने के लिए उपलब्ध है:

Internet Explorer में:

http://www.quirksmode.org/dom/tests/elementdimensions.html

this article treating the clientHeight property पर आईई < 8 और IE पर भौतिक पिक्सल और तार्किक पिक्सल के बीच मतभेद पर एक महत्वपूर्ण फोकस> = 8 है संस्करण 8 से पहले, यह भौतिक पिक्सेल आकार में ऊंचाई को पुनर्प्राप्त करता है, जबकि संस्करण 8 से, यह लॉजिकल पिक्सेल आकार में ऊंचाई देता है।

यह मानते हुए कि ब्राउज़रों पर ज़ूम के उपयोग मुख्य रूप से मोबाइल उपकरणों पर प्रयोग किया जाता है, मैं इसे लगता है कि:

• यह डेस्कटॉप दर्शकों पृष्ठों के लिए element.clientWidth और element.clientHeight का उपयोग कर काफी सुरक्षित है/वेब एप्लिकेशन;
• क्रॉस-डिवाइस पृष्ठों/वेब ऐप्स के लिए सापेक्ष माप इकाइयों (उदा। एम) का उपयोग भौतिक और तार्किक पिक्सेल के बीच के अंतर को हल कर सकता है।

एक आसान आयाम प्रबंधन के लिए

, उन्हें इकाई पार मंच विकास (W3 org specs on units and rem's draft) है, जो supported on modern browsers हो रहा है सुधार कर सकते हैं। मुझे अभी भी सीएसएस मीडिया-प्रश्नों में सापेक्ष माप इकाइयों पर कोई अनुभव नहीं है, लेकिन यह interesting article on the best unit measure for CSS media-queries पढ़ना शायद यह एक अध्ययन के योग्य है।

इन विचारों पर कोई राय की सराहना की जाती है।