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 <legend> Element.
Note: This property is no longer supported in HTML5.
Syntax:
- It returns a legend align Property.
Legendobject.align;
- It sets the Legend to align Property.
Legendobject.align="left|right|top|bottom"
Property values: This property accepts four parameters as mentioned above and described below:
- left: It sets the caption to the left of the element. It is a default value.
- right: It sets the caption to the right of an element.
- top: It sets the caption to the top of the element.
- bottom: It sets the caption to the bottom of the element.
Return Value: It returns a string value that represents the <legend> element alignment.
Example 1: This Example returns a Legend align Property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >DOM Legend align Property</ title >
< style >
form {
width: 70%;
}
label {
display: inline-block;
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 >
< 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() {
// return legend align property
let g =
document.getElementById("GFG").align;
document.getElementById(
"sudo").innerHTML = g;
}
</ script >
</ body >
</ html >
|
Output:
Example 2: This Example sets the Legend to align Property.
HTML
<!DOCTYPE html>
< html >
< head >
< title >DOM Legend align Property</ title >
< style >
form {
width: 70%;
}
label {
display: inline-block;
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 >
< 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() {
// set legend align Property
let g =
document.getElementById("GFG").align = "right";
document.getElementById(
"sudo").innerHTML =
"The value of the align attribute was changed to " + g;
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers: The browsers supported by HTML DOM Legend align Property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Last Updated :
15 Jun, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...