Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> HTML

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


style.textAlign प्रॉपर्टी क्या है?

DOM style.textAlign प्रॉपर्टी किसी ब्लॉक-लेवल तत्व या टेबल सेल में टेक्स्ट की क्षैतिज संरेखण (हॉरिजॉन्टल अलाइनमेंट) को प्राप्त या सेट करती है। यह CSS text-align प्रॉपर्टी के अनुरूप है।

सिंटैक्स

संरेखण प्राप्त करना

object.style.textAlign

संरेखण सेट करना

object.style.textAlign = "value"

मान

मान विवरण
left टेक्स्ट को बाएं संरेखित करता है (LTR में डिफ़ॉल्ट)।
right टेक्स्ट को दाएं संरेखित करता है।
center टेक्स्ट को केंद्र में संरेखित करता है।
justify टेक्स्ट को जस्टिफाई करता है (दोनों किनारों पर संरेखित, अंतिम लाइन को छोड़कर)।
start लेखन दिशा की शुरुआत में संरेखित (LTR में बाएं, RTL में दाएं)।
end लेखन दिशा के अंत में संरेखित (LTR में दाएं, RTL में बाएं)।
match-parent पैरेंट से गणना मान विरासत में लेता है (start/end हल करके)।
inherit, initial, unset मानक CSS वैश्विक मान।

उदाहरण

यह उदाहरण एक पैराग्राफ में टेक्स्ट को केंद्र में संरेखित करता है:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p { border: 2px solid #fff; margin: 1.5rem auto; }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>DOM Style textAlign प्रॉपर्टी उदाहरण</h1>
<p>यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ। यह पैराग्राफ 1 है कुछ डमी टेक्स्ट के साथ।</p>
<button onclick="setAlign()" class="btn">textAlign सेट करें</button>
<script>
  function setAlign() {
    document.querySelector('p').style.textAlign = "center";
  }
</script>
</body>
</html>

आउटपुट

"textAlign सेट करें" बटन पर क्लिक करने पर, पैराग्राफ के अंदर का टेक्स्ट केंद्र में संरेखित हो जाता है।

महत्वपूर्ण नोट्स

  • केवल ब्लॉक कंटेनर पर लागू: यह इंलाइन तत्वों पर काम नहीं करता (उनके पैरेंट ब्लॉक पर लागू करें)।
  • इंलाइन/इंलाइन-ब्लॉक बच्चों को प्रभावित करता है: पैरेंट पर text-align: center इंलाइन/इंलाइन-ब्लॉक बच्चों को केंद्रित करता है (छवियों, बटनों को केंद्रित करने के लिए सामान्य)।
  • RTL समर्थन: start/end मान RTL लेआउट के लिए तार्किक संरेखण प्रदान करते हैं।
  • विरासत: बच्चे तत्व पैरेंट से text-align विरासत में लेते हैं।

सामान्य उपयोग के मामले

  • शीर्षक, कैप्शन, बटन टेक्स्ट केंद्रित करना।
  • आर्टिकल/पैराग्राफ के लिए जस्टिफाइड टेक्स्ट (text-align: justify + hyphens: auto)।
  • संख्यात्मक डेटा कॉलम के लिए दाएं संरेखण (टेबल में)।
  • RTL भाषाओं के लिए लॉजिकल संरेखण (start/end)।

संबंधित प्रॉपर्टीज़

  • vertical-align - इंलाइन/टेबल-सेल तत्वों के लिए ऊर्ध्वाधर संरेखण।
  • text-align-last - जस्टिफाइड टेक्स्ट की अंतिम लाइन का संरेखण।
  • फ्लेक्सबॉक्स: justify-content (मुख्य अक्ष), align-items (क्रॉस अक्ष)।
  • ग्रिड: justify-items, align-items।
  1. HTML DOM Style transformOrigin गुणधर्म HTML DOM Style transformOrigin गुणधर्म

    HTML DOM style transformOrigin गुणधर्म किसी HTML दस्तावेज़ में एक तत्व पर 2D या 3D ट्रांसफ़ॉर्मेशन लागू करने का स्थान निर्धारित करता है और उसे लौटाता है। वाक्य रचना (Syntax) निम्नलिखित वाक्य रचना है: transformOrigin लौटाना object.style.transformOrigin transformOrigin संशोधित करना object.style.tr

  1. HTML DOM Style quotes गुणधर्म HTML DOM Style quotes गुणधर्म

    HTML DOM style quotes गुणधर्म HTML दस्तावेज़ में उद्धरण चिह्नों के प्रकार को लौटाता है और संशोधित करता है। वाक्य रचना (Syntax) निम्नलिखित वाक्य रचना है: quotes लौटाना object.style.quotes quotes संशोधित करना object.style.quotes = value मान (Values) यहाँ मान निम्न हो सकते हैं: मान व्याख्या

  1. HTML DOM Style textTransform गुणधर्म HTML DOM Style textTransform गुणधर्म

    DOM style textTransform गुणधर्म HTML दस्तावेज़ में किसी तत्व के टेक्स्ट पर ट्रांसफ़ॉर्मेशन लागू करता है और उसे लौटाता है। वाक्य रचना (Syntax) निम्नलिखित वाक्य रचना है: textTransform लौटाना object.style.textTransform textTransform संशोधित करना object.style.textTransform = value मान (Values) यहाँ