DOM Style lineHeight प्रॉपर्टी
lineHeight प्रॉपर्टी किसी एलिमेंट के टेक्स्ट की लाइन ऊँचाई (line height) सेट या प्राप्त करती है - यानी टेक्स्ट की पंक्तियों के बीच की दूरी।
सिंटैक्स
// प्राप्त करें object.style.lineHeight // सेट करें object.style.lineHeight = "normal | number | length | % | initial | inherit"
मान
| मान | विवरण |
|---|---|
| normal | सामान्य लाइन ऊँचाई (ब्राउज़र डिफ़ॉल्ट, लगभग 1.2) |
| number | यूनिटलेस संख्या - वर्तमान फॉन्ट आकार से गुणा (अनुशंसित) |
| length | निश्चित लंबाई (px, em, rem, pt) |
| % | वर्तमान फॉन्ट आकार का प्रतिशत |
| initial | डिफ़ॉल्ट मान पर रीसेट |
| inherit | पैरेंट से विरासत में प्राप्त |
उदाहरण: बटन क्लिक पर लाइन ऊँचाई बढ़ाना
<!DOCTYPE html>
<html>
<body>
<h2>डेमो हेडिंग</h2>
<div id="myText">
यहां हमने डेमो टेक्स्ट सेट किया है। यहां हमने डेमो टेक्स्ट सेट किया है।
यहां हमने डेमो टेक्स्ट सेट किया है। यहां हमने डेमो टेक्स्ट सेट किया है।
यहां हमने डेमो टेक्स्ट सेट किया है। यहां हमने डेमो टेक्स्ट सेट किया है।
</div>
<br>
<button type="button" onclick="increaseLineHeight()">लाइन ऊँचाई बढ़ाएं</button>
<script>
function increaseLineHeight() {
document.getElementById("myText").style.lineHeight = "3";
}
</script>
</body>
</html>
आउटपुट
बटन क्लिक करने से पहले: सामान्य लाइन स्पेसिंग। क्लिक करने के बाद: लाइन ऊँचाई फॉन्ट आकार की 3x हो जाती है।
मान तुलना
lineHeight: 1.5; /* अनुशंसित - यूनिटलेस, बच्चे विरासत में गुणक प्राप्त करते हैं */ lineHeight: 150%; /* फॉन्ट आकार का 150% */ lineHeight: 1.5em; /* फॉन्ट आकार का 1.5 गुना */ lineHeight: 24px; /* निश्चित 24px */ lineHeight: normal; /* ब्राउज़र डिफ़ॉल्ट */
यूनिटलेस संख्या क्यों सर्वोत्तम?
.parent { font-size: 16px; line-height: 1.5; } /* 24px लाइन ऊँचाई */
.child { font-size: 24px; } /* 36px लाइन ऊँचाई (1.5 × 24px) - स्वतः अनुकूलित! */
// यदि प्रतिशत/लंबाई उपयोग करें:
.parent { font-size: 16px; line-height: 150%; } /* 24px */
.child { font-size: 24px; } /* अभी भी 24px लाइन ऊँचाई - बहुत तंग! */
उपयोग के मामले
- पठनीयता सुधारना (1.5-1.7 अनुशंसित)
- हेडिंग्स के लिए टाइट लाइन ऊँचाई (1.1-1.3)
- कोड ब्लॉक्स के लिए नियंत्रित स्पेसिंग
- डायनामिक टेक्स्ट आकार परिवर्तन पर अनुकूलन
