jQuery के बिना आधुनिक ब्राउज़रों के लिए चौड़ाई() और ऊंचाई()

Question

मैं लोचदार div के लिए एक साधारण फोल्ड/असुरक्षित प्रभाव को लागू करने की कोशिश कर रहा हूं, यानी जब तत्व के वास्तविक आयाम सीएसएस के माध्यम से सेट नहीं होते हैं और इस प्रकार यह मामूली रूप से निर्धारित नहीं होता है। इसलिए मुझे मनमानी तत्वों के लिए jQuery की चौड़ाई() और ऊंचाई() के समकक्षों की आवश्यकता है; विधियों को कुछ ऐसा वापस करना चाहिए जो * .style.width/ऊंचाई को गुना/प्रकट प्रभाव प्राप्त करने के लिए असाइन किया जा सके। विधियां भी सेटर्स हो सकती हैं, हालांकि जरूरी नहीं है क्योंकि यह वैसे भी छोटा है (या यह नहीं है?)

संगतता: IE8 + और 3 का पर्याप्त गिरोह: फ़ायरफ़ॉक्स, क्रोम, सफारी। इसलिए। "jQuery का उपयोग करें" के अलावा इस के लिए कोई जवाब नहीं है जिसे मैं इस समय नहीं करना चाहता हूं। बात यह है कि मुझे ऐसे पुरातन ब्राउज़र को आईई 6/7 और नेटस्केप के रूप में समर्थन करने की आवश्यकता नहीं है। मैं चाहता हूं कि मेरा कोड आधुनिक ब्राउज़र के लिए सरल, पहली जावास्क्रिप्ट हो। IE9 के लिए IE8 को छोड़ना भी एक विकल्प है।

मुझे लगता है कि उत्तर कई वेब डेवलपर्स के लिए उपयोगी हो सकता है। धन्यवाद!

संपादित करें: मैं निश्चित रूप से समझता हूं, jQuery का विश्लेषण (और पुरातन quirks ड्रॉप) एक अच्छा विकल्प है, लेकिन मैंने सोचा कि किसी ने पहले से ही यह किया है और हमारे साथ साझा कर सकता है।

Answer 1

आईई 8, एफएफ, क्रोम और सफारी के साथ खेलने के बाद आज मेरे साथ अपने प्रश्न का उत्तर दिया गया।

मान लीजिए कि हम न्यूनतम संभव जावास्क्रिप्ट और कोई jQuery के साथ लंबवत रूप से एक div तत्व को फोल्ड करना और प्रकट करना चाहते हैं (इसलिए हम केवल सादगी के लिए ऊंचाई के बारे में बात करेंगे)। एक इनलाइन त्रुटि संदेश बॉक्स हो सकता है जिसे आप पृष्ठ पर अच्छी तरह से दिखाना और छिपाना चाहते हैं। संदेश बॉक्स स्वयं लोचदार है और आप इसके वास्तविक आयामों को नहीं जानते हैं। यहां हल करने के लिए दो सामान्य समस्याएं हैं:

समस्या # 1: ऑफ़सेट हाइट, क्लाइंट हाइट और स्क्रोल हाइट गुण ब्राउज़र में कुख्यात रूप से असंगत हैं। आप उन पर भरोसा नहीं कर सकते हैं, खासकर जब मार्जिन/पैडिंग/सीमा 0 के अलावा किसी अन्य चीज़ पर सेट की जाती है और जब सीएसएस ऊंचाई डिफ़ॉल्ट के अलावा कुछ और होती है (यानी जब वास्तव में तत्व को फोल्ड/प्रकट किया जाता है)। GetComputedStyle() प्राप्त है, लेकिन यह केवल सैन ब्राउज़र पर उपलब्ध है और आईई में नहीं। ओटीओएच, आईई की वर्तमान स्टाइल प्रॉपर्टी गणना मूल्यों को वापस नहीं करती है जैसा आप उम्मीद कर सकते हैं (उदाहरण के लिए आप ऊंचाई मूल्य के रूप में "ऑटो" देख सकते हैं)। यह पता चला है, कोई मार्जिन/पैडिंग/सीमा ऑफसेट के साथ हाइट विश्वसनीय और सभी आधुनिक ब्राउज़रों पर संगत है।

समस्या # 2: आपके div तत्व को एनिमेट करने का एकमात्र तरीका (जिसे मैं जानता हूं) शैली बदलना है।ऊंचाई, जो, हालांकि, पैडिंग और सीमा शामिल नहीं है, और इस प्रकार आप 0 से नीचे बॉक्स को एनिमेट नहीं कर सकते हैं या गैर-शून्य पैडिंग और सीमा वाले तत्वों के लिए 0 से अपनी एनीमेशन शुरू नहीं कर सकते हैं। (इसके शीर्ष पर, आईई 0px को शैली के रूप में स्वीकार नहीं करता है। इसलिए, न्यूनतम आकार 1px वैसे भी होगा)।

दोनों समस्याओं का समाधान डिफ़ॉल्ट बॉक्स के साथ किसी अन्य div के साथ अपने बॉक्स को लपेटना है, यानी पैडिंग/मार्जिन/सीमा सभी 0 पर सेट है, जो एक नए div के लिए डिफ़ॉल्ट शैली है। जिस बॉक्स को आप फोल्ड करना चाहते हैं और सामने आना चाहिए वह अंदर होना चाहिए और वांछित होने पर केवल मार्जिन सेटिंग, पैडिंग और सीमा नहीं होनी चाहिए। इस तरह, आप (1) ऑफसेट हाइट के माध्यम से अपने लोचदार आंतरिक बॉक्स की ऊंचाई को विश्वसनीय रूप से निर्धारित करने में सक्षम होंगे, और (2) 1 पिक्सेल से बाहरी बॉक्स की ऊंचाई को एनिमेट करें।

तो, चलो कहते हैं कि हम इस चेतन करना चाहते हैं:

<div id="errmsg" style="display:none"> 
    <div class="errmsg"> 
     <div class="window-close" onClick="javascript:showErrMsg('', this.parentNode.parentNode)"></div> 
     <div id="errmsg.text"></div> 
    </div> 
</div> 

बॉक्स शुरुआत में अदृश्य है। "विंडो-क्लोज़" क्लास दाईं ओर एक छोटा सा बॉक्स है जिसमें क्रॉस के साथ बॉक्स को छिपाने के लिए उपयोग किया जाता है। खाली स्ट्रिंग के साथ showErrMsg() को कॉल करना संदेश बॉक्स को फोल्ड करता है (नीचे देखें)। यह त्रुटि संदेश बॉक्स चेतन करने के लिए

मेरे जावा स्क्रिप्ट कोड के रूप में इस प्रकार है (मैं भी अस्पष्टता जो यहाँ सादगी के लिए छोड़ दिया जाता है एनिमेट कर रहा हूँ) है:

var ANIMATE_STEPS = 10; 
var ANIMATE_DELAY = 20; 


function _obj(obj, parent) 
{ 
    if (typeof obj == 'string') 
     obj = (parent ? parent : document).getElementById(obj); 
    return obj; 
} 

function _setStyleHeight(obj, h) 
{ 
    _obj(obj).style.height = Math.round(h) + 'px'; 
} 

function _animateVertFold(obj, cur, by, lim) 
{ 
    obj = _obj(obj); 
    cur += by; 
    if (by < 0 && cur <= 1) 
    { 
     obj.style.display = 'none'; 
     _setStyleHeight(obj, 1); // IE doesn't accept 0 
    } 
    else if (by > 0 && cur >= lim) 
    { 
     _setStyleHeight(obj, lim); 
    } 
    else 
    { 
     _setStyleHeight(obj, cur); 
     setTimeout('_animateVertFold(\'' + obj.id + '\', ' + 
      cur + ', ' + by + ', ' + lim + ')', ANIMATE_DELAY); 
    } 
} 

function _expandElem(obj) 
{ 
    obj = _obj(obj); 
    if (obj.style.display == 'none') 
    { 
     obj.style.overflow = 'hidden'; 
     _setStyleHeight(obj, 1); 
     obj.style.display = 'block'; 
     var innerDiv = obj.getElementsByTagName('div')[0]; // better way? 
     var h = innerDiv.offsetHeight; 
     if (h > 0) 
      _animateVertFold(obj, obj.offsetHeight, h/ANIMATE_STEPS, h); 
    } 
} 

function _shrinkElem(obj) 
{ 
    obj = _obj(obj); 
    if (!obj.style.display || obj.style.display != 'none') 
    { 
     obj.style.display = 'block'; 
     obj.style.overflow = 'hidden'; 
     var h = obj.offsetHeight; 
     _animateVertFold(obj, h, - h/ANIMATE_STEPS, h); 
    } 
} 


function showErrMsg(msg, id) 
{ 
    id || (id = '_errmsg'); 
    obj = _obj(id); 
    if (msg != '') 
    { 
     _obj(id + '.text').innerHTML = msg; 
     _expandElem(obj); 
    } 
    else 
     _shrinkElem(obj); 
} 

आप showErrMsg (कॉल कर सकते हैं) और कोड ख्याल रखेंगे शेष में से। आपको विंडो-क्लोज़ क्लास को जीयूआई क्लोज-विंडो बटन की नकल करने वाली चीज़ के रूप में परिभाषित करना होगा। और निश्चित रूप से "errmsg" वर्ग को अलग-अलग पृष्ठभूमि रंग, सीमा और संभावित रूप से फ़ॉन्ट चेहरे वाले बॉक्स के रूप में भी।

Answer 2

मुझे लगता है कि यहां सबसे व्यावहारिक दृष्टिकोण jQuery स्रोत का विश्लेषण करना होगा और वहां से अपने कार्यों का निर्माण करना होगा।

Answer 3

आप अपने द्वारा समर्थित आधुनिक ब्राउज़रों में उपलब्ध window.getComputedStyle का उपयोग कर सकते हैं।
यह किसी तत्व पर लागू सभी वास्तविक शैली गुणों का संग्रह देता है।

यहाँ एक वर्णन है: https://developer.mozilla.org/en/DOM:window.getComputedStyle

Answer 4

element.offsetHeight, element.offsetWidth काम बहुत ज्यादा एक ही भर ब्राउज़रों, पूर्णांकों

element.clientWidth, element.clientHeight वापसी पूर्णांकों लौटने के लिए, लेकिन कुछ है एक्स-ब्राउज़र मतभेद (पैडिंग, सीमा चौड़ाई)

ब्राउज़र वर्तमान स्टाइल या गणना शैली वापसी स्ट्रिंग्स, और वे एक्स-ब्राउज़र में हेरफेर करने के लिए पिक्सेल, ईएमएस, पर्सेंट-हार्ड में हो सकते हैं।