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