HTML DOM Style tabSize प्रॉपर्टी

परिचय

HTML DOM Style tabSize प्रॉपर्टी HTML दस्तावेज़ में टैब कैरेक्टर के लिए उपयोग की जाने वाली स्पेस की लंबाई को निर्दिष्ट करती है। यह <pre> टैग या white-space: pre वाले एलिमेंट्स में कोड प्रदर्शित करते समय विशेष रूप से उपयोगी है।

सिंटैक्स

1. tabSize मान प्राप्त करना

object.style.tabSize

2. tabSize मान सेट करना

object.style.tabSize = "value"

मान

उदाहरण

इस उदाहरण में, एक <pre> एलिमेंट में टैब कैरेक्टर्स हैं। जब "Change tabSize" बटन पर क्लिक किया जाता है, तो टैब आकार को 20 स्पेस पर सेट किया जाता है।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem 0;
  }
  pre {
    background: #f4f4f4;
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
  }
</style>
<body>
<h1>DOM Style tabSize प्रॉपर्टी डेमो</h1>
<pre>function hello() {
	console.log("नमस्ते दुनिया");
	if (true) {
		return "सफलता";
	}
}</pre>
<button onclick="changeTabSize()" class="btn">Tab Size बदलें</button>
<script>
  function changeTabSize() {
    document.querySelector('pre').style.tabSize = "4";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में टैब 8 स्पेस के बराबर होते हैं (डिफ़ॉल्ट)। "Tab Size बदलें" बटन पर क्लिक करने पर, टैब 4 स्पेस के बराबर हो जाते हैं, जिससे कोड अधिक कॉम्पैक्ट दिखाई देता है।

उपयोग के मामले

• कोड स्निपेट्स प्रदर्शित करते समय पठनीयता के लिए
• टीम कोडिंग स्टैंडर्ड्स के अनुसार टैब आकार समायोजित करना
• कॉम्पैक्ट कोड डिस्प्ले के लिए छोटा टैब आकार

नोट

tabSize प्रॉपर्टी केवल तभी काम करती है जब एलिमेंट पर white-space: pre, pre-wrap, या pre-line सेट हो, या एलिमेंट <pre> या <textarea> हो।

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में समर्थित (Firefox में -moz-tab-size, Chrome/Opera में tabSize के रूप में)।