HTML | DOM 图例对象

DOM Legend 对象用于表示 HTML

元素。图例元素由getElementById()访问。

特性：

• 表单：用于返回包含图例元素的表单的引用。

句法：

document.getElementById("ID">);

其中“id”是分配给“legend”标签的ID。

示例 1：

  

    DOM Legend Object
    
        form {
            width: 50%;
        }
          
        label {
            display: inline-block;
            float: left;
            clear: left;
            width: 90px;
            margin: 5px;
            text-align: left;
        }
          
        input[type="text"] {
            width: 250px;
            margin: 5px 0px;
        }
          
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
        }
    

  

    GeeksforGeeks
    DOM Legend object
    
        
            
            STUDENT::
            Name:
            
            
            Email:
            
            
            Date of birth:
            
            
            Address:
            
            
            Enroll No:
            
        
    
    
    Submit
    
        function myGeeks() {
            
            // Accessing legend tag
            var g = document.getElementById("GFG");
            g.style.color = "coral";
            g.style.fontSize = "20px";
        }
    

  
         

输出：

单击按钮之前：

点击按钮后：

示例 2：可以使用 document.createElement方法创建 Legend 对象。

  

    DOM Legend Object
    
        form {
            width: 50%;
        }
          
        label {
            display: inline-block;
            float: left;
            clear: left;
            width: 90px;
            margin: 5px;
            text-align: left;
        }
          
        input[type="text"] {
            width: 250px;
            margin: 5px 0px;
        }
          
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
        }
    

  

    GeeksforGeeks
    DOM Legend object
    
        
  
            Name:
            
            
            Email:
            
            
            Date of birth:
            
            
            Address:
            
            
            Enroll No:
            
        
    
    
    Submit
    
        function myGeeks() {
            // Legend object created 
            var g = document.createElement("LEGEND");
            var f = document.createTextNode("STUDENT:");
            g.appendChild(f);
            document.getElementById("GFG").appendChild(g);
  
        }
    

  

输出：

点击按钮前：

点击按钮后：

支持的浏览器： DOM Legend 对象支持的浏览器如下：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器