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>
<!-- 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() {
// 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>
<!-- 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() {
// 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