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
