HTML DOM Caption Object
Last Updated :
15 Jun, 2023
The DOM Caption Object is used to represent the HTML <Caption> element (A caption element is used to specify the caption of a table). The Caption element is accessed by getElementById().
Properties:
- It has a align Attribute which is used to set or return the alignment of the caption.
Syntax:
document.getElementById("id");
Where “id” is the ID assigned to the Caption tag.
Example 1: In this example, we will use DOM Caption Object
HTML
<!DOCTYPE html>
< html >
< head >
< style >
table,
th,
td {
border: 1px solid black;
}
</ style >
</ head >
< body >
< h1 style = "color:green;font-size:35px;" >
GeeksForGeeks
</ h1 >
< h2 >DOM Caption Object</ h2 >
< table >
< caption id = "GFG" >Students</ caption >
< tr >
< th >Firstname</ th >
< th >Lastname</ th >
< th >Age</ th >
</ tr >
< tr >
< td >Priya</ td >
< td >Sharma</ td >
< td >24</ td >
</ tr >
< tr >
< td >Arun</ td >
< td >Singh</ td >
< td >32</ td >
</ tr >
< tr >
< td >Sam</ td >
< td >Watson</ td >
< td >41</ td >
</ tr >
</ table >
< br >
< button onclick = "myGeeks()" >Submit</ button >
< script >
function myGeeks() {
let w = document.getElementById("GFG");
w.style.color = "green";
w.style.fontSize = "28px";
}
</ script >
</ body >
</ html >
|
Output:
Example 2: Caption Object can be created by using the document.createElement method.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
table,
th,
td {
border: 2px soliD green;
}
</ style >
</ head >
< body >
< h1 style = "color:green;font-size:35px;" >
GeeksForGeeks
</ h1 >
< h2 >DOM Caption Object</ h2 >
< table id = "GFG" >
< tr >
< th >Firstname</ th >
< th >Lastname</ th >
< th >Age</ th >
</ tr >
< tr >
< td >Priya</ td >
< td >Sharma</ td >
< td >24</ td >
</ tr >
< tr >
< td >Arun</ td >
< td >Singh</ td >
< td >32</ td >
</ tr >
< tr >
< td >Sam</ td >
< td >Watson</ td >
< td >41</ td >
</ tr >
</ table >
< br >
< button onclick = "myGeeks()" >
Submit
</ button >
< script >
function myGeeks() {
let cap = document.createElement("CAPTION");
let txt = document.createTextNode("Students");
cap.appendChild(txt);
cap.style.color = "red";
cap.style.fontSize = "29px";
let tab = document.getElementById("GFG")
tab.insertBefore(cap, tab.childNodes[0]);
}
</ script >
</ body >
</ html >
|
Output:
Supported Browsers: The browser supported by DOM Caption Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Share your thoughts in the comments
Please Login to comment...