HTML TableHeader abbr用法及代码示例

DOM TableHeader abbr属性用于设置或返回abbr属性的值。 abbr属性用于在标题单元格中指定内容的较短版本。它对普通的Web浏览器没有视觉效果，可以由屏幕阅读器使用。

用法:

它返回abbr属性。
```
tableheaderObject.abbr
```
它用于设置abbr属性。
```
tableheaderObject.abbr = text
```

属性值：它包含值，即指定标题内容单元格简短描述的文本。

返回值：它返回一个字符串值，该字符串值表示标题内容单元格的简短描述。

示例1：本示例返回abbr属性。

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!-- style to set border -->
    <style> 
        table, 
        th, 
        td { 
            border:1px solid black; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
  
    <h2> 
      DOM TableHeader abbr Property 
  </h2> 
  
    <table> 
        <tr> 
            <th id="table" 
                abbr="GeeksforGeeks"> 
              Username 
          </th> 
        </tr> 
  
        <tr> 
            <td>geeks</td> 
        </tr> 
    </table> 
    <br> 
    <button onclick="myGeeks()"> 
        Click Here! 
    </button> 
    <p id="sudo"
       style="font-size:25px; 
              color:green"> 
  </p> 
    <!-- Script to access th element -->
    <script> 
        function myGeeks() { 
            var tab = document.getElementById( 
              "table").abbr; 
            document.getElementById( 
              "sudo").innerHTML = tab; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：

单击按钮后：

示例2：本示例设置abbr属性。

<!DOCTYPE html> 
<html> 
  
<head> 
  
    <!-- style to set border -->
    <style> 
        table, 
        th, 
        td { 
            border:1px solid black; 
        } 
    </style> 
</head> 
  
<body> 
  
    <h1>GeeksforGeeks</h1> 
  
    <h2> 
      DOM TableHeader abbr Property 
  </h2> 
  
    <table> 
        <tr> 
            <th id="table" 
                abbr="GeeksforGeeks"> 
              Username 
          </th> 
        </tr> 
  
        <tr> 
            <td>geeks</td> 
        </tr> 
    </table> 
    <br> 
    <button onclick="myGeeks()"> 
        Click Here! 
    </button> 
    <p id="sudo" 
       style="font-size:25px; 
              color:green"> 
  </p> 
    <!-- Script to access th element -->
    <script> 
        function myGeeks() { 
            var tab = document.getElementById( 
              "table").abbr = "GeeksUser"; 
            
            document.getElementById( 
              "sudo").innerHTML = 
              "The value of the abbr attribute was changed to " 
            + tab; 
        } 
    </script> 
</body> 
  
</html>

输出：
在单击按钮之前：

单击“打开”按钮后：

支持的浏览器：

谷歌浏览器
Internet Explorer 10.0+
Opera
苹果Safari
火狐浏览器

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML | DOM TableHeader abbr Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。