एक अवधि की रेखा ऊंचाई कैसे प्राप्त करें?

Question

क्या जावास्क्रिप्ट/jQuery में span (या अन्य इनलाइन तत्व) के line-height प्राप्त करने का कोई तरीका है?

मैं सटीक पिक्सल में line-height गणना की जरूरत है, नहीं प्रकार 1.2em, normal या fontSize * 1.5 तरह heuristics के मूल्यों।

मुझे क्या करना है लाइन की पूरी ऊंचाई को भरने के लिए मुझे span की पृष्ठभूमि को खींचना है। मुझे लगा कि मैं अवधि को फैलाने के लिए पैडिंग जोड़ सकता हूं, लेकिन इसके लिए मुझे सटीक line-height की आवश्यकता है। अगर कोई दूसरा दृष्टिकोण पेश कर सकता है, तो यह भी सहायक होगा।

Answer 1

$("span").css("line-height"); 

उदाहरण के लिए गणना किए गए पीएक्स मान को स्ट्रिंग "16px" के रूप में पुनर्प्राप्त करता है। यह कवर के तहत IE के currentStyle या मानक getComputedStyle का उपयोग करता है। यह एक आश्चर्यजनक लग रहा है जब यह एक सेटर के रूप में काम करता है यह elem.style.something = value है जो एक पूरी तरह से अलग बात है।

Answer 2

यह मानते हुए कि अवधि एक div में निहित है। रिश्तेदार

और एक ब्लॉक है कि 100% ऊंचाई लेता है के रूप में अवधि:

आप स्थिति को div सेट कर सकते हैं।

इस तरह आप जितनी चाहें उतनी अवधि बढ़ाएंगे।

उदाहरण here (ध्यान दें:।। प्रभाव देखने के लिए, पारदर्शी करने के लिए अवधि की पृष्ठभूमि का रंग बदलने आप लाल div देखने के लिए सक्षम होना चाहिए)

Answer 3

अपने डिजाइन इसके लिए अनुमति देता है, तो आप आवेदन कर सकते हैं तत्वों आप लक्षित कर रहे हैं और फिर outerHeight उपयोग करने के लिए इनलाइन-ब्लॉक ... यह करने के लिए

var inlineHeight = $('.inline-height').css("display", "inline-block").outerHeight(); 
//console.log('Inline Height:' + inlineHeight); 

Answer 4

एक आसान तरीका है:

var style = window.getComputedStyle(element); 
var lineHeight = style.getPropertyValue('line-height'); 

यह jQuery का उपयोग किये बिना लाइन ऊंचाई की गणना मूल्य प्राप्त करेगा और आईई 9 के बाद से सभी ब्राउज़रों पर काम करेगा।