HTML DOM टेबलहेडर abbr प्रॉपर्टी: संक्षिप्त विवरण सेट/प्राप्त करना

HTML DOM टेबलहेडर abbr प्रॉपर्टी HTML दस्तावेज़ में टेबल के abbr एट्रिब्यूट का मान लौटाती और संशोधित करती है। abbr एट्रिब्यूट हेडर सेल के लिए संक्षिप्त/संक्षिप्त विवरण प्रदान करता है, जो स्क्रीन रीडर्स के लिए उपयोगी है।

सिंटैक्स

1. abbr प्राप्त करना:

object.abbr

2. abbr सेट करना:

object.abbr = "text"

उदाहरण: abbr मान दिखाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; width: 400px; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
</style>
<body>
  <h1>DOM टेबलहेडर abbr प्रॉपर्टी डेमो</h1>
  <table border="2">
    <thead>
      <tr> <th>नाम</th> <th>भाषा</th> </tr>
    </thead>
    <tbody>
      <tr>
        <td id="john">जॉन</td>
        <td abbr="Eng" id="john-lang">English</td>
      </tr>
      <tr>
        <td id="elon">एलन</td>
        <td abbr="Ger" id="elon-lang">जर्मनी</td>
      </tr>
    </tbody>
  </table>
  <button onclick="get()" class="btn">abbr मान दिखाएं</button>
  <div class="show"></div>
  <script>
    function get() {
      document.querySelector(".show").innerHTML = "English के लिए abbr: " + document.querySelector("#john-lang").abbr;
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: टेबल "English" और "जर्मनी" सेल्स के साथ दिखती है
2. "abbr मान दिखाएं" क्लिक: "English के लिए abbr: Eng" प्रदर्शित होता है

abbr एट्रिब्यूट का महत्व

• एक्सेसिबिलिटी: स्क्रीन रीडर्स पूरा कंटेंट पढ़ने के बजाय संक्षिप्त संस्करण पढ़ सकते हैं
• सेमांटिक HTML: डेटा का अर्थ स्पष्ट करता है
• केवल <th> और <td> पर: मुख्य रूप से हेडर सेल्स के लिए उपयोगी
• दृश्य नहीं: ब्राउज़र में सामान्य रूप से प्रदर्शित नहीं होता

उपयोग उदाहरण