HTML | DOM Legend align Property

The Legend align Property in HTML DOM is used to set or return the value of the align attribute of a <legend> Element.

Sntax:

It returns a legend align Property.
```
Legendobject.align;
```

It sets the Legend align Property.

Legendobject.align="left|right|top|bottom"

Property values: This poperty accepts four parameter as mentioned above and described below:

left: It sets the caption to the left of element.
right: It sets the caption to the right of element.
top: It sets the caption to the top of element.
bottom: It sets the caption to the bottom of element.

Example 1: This Example returns a Legend align Property.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Legend align Property</title> 
    <style> 
        form { 
            width: 70%; 
        } 
          
        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; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg">GeeksforGeeks</div> 
    <h2>DOM Legend align Property</h2> 
    <form id="myGeeks"> 
        <fieldset> 
            <!-- Assigning legend id -->
            <legend id="GFG" align="left">STUDENT::</legend> 
            <label>Name:</label> 
            <input type="text"> 
            <br> 
            <label>Email:</label> 
            <input type="text"> 
            <br> 
            <label>Date of birth:</label> 
            <input type="text"> 
            <br> 
            <label>Address:</label> 
            <input type="text"> 
            <br> 
            <label>Enroll No:</label> 
            <input type="text"> 
        </fieldset> 
    </form> 
    <br> 
    <button onclick="myGeeks()">Submit</button> 
    <p id="sudo" style="font-size:25px;"></p> 
    <script> 
        function myGeeks() { 
  
            // Accessing legend tag  
            var g = 
                document.getElementById("GFG").align; 
  
            document.getElementById( 
                "sudo").innerHTML = g; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before Clicking On Button:
After Clicking On Button:

Example 2: This Example sets the Legend align Property.

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>DOM Legend align Property</title> 
    <style> 
        form { 
            width: 70%; 
        } 
          
        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; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="gfg">GeeksforGeeks</div> 
    <h2>DOM Legend align Property</h2> 
    <form id="myGeeks"> 
        <fieldset> 
            <!-- Assigning legend id -->
            <legend id="GFG" align="left">STUDENT::</legend> 
            <label>Name:</label> 
            <input type="text"> 
            <br> 
            <label>Email:</label> 
            <input type="text"> 
            <br> 
            <label>Date of birth:</label> 
            <input type="text"> 
            <br> 
            <label>Address:</label> 
            <input type="text"> 
            <br> 
            <label>Enroll No:</label> 
            <input type="text"> 
        </fieldset> 
    </form> 
    <br> 
    <button onclick="myGeeks()">Submit</button> 
    <p id="sudo" style="font-size:25px;"></p> 
    <script> 
        function myGeeks() { 
  
            // Accessing legend tag  
            var g = 
                document.getElementById("GFG").align = "right"; 
  
            document.getElementById( 
                "sudo").innerHTML =  
              "The value of the align attribute was changed to " + g; 
        } 
    </script> 
</body> 
  
</html> 

Output:

Before Clicking On Button:
After Clicking On Button:

Supported Browsers: The browsers supported by HTML DOM Legend align Property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: