HTML | DOM Caption Object
The DOM Caption Object is used to represent the HTML <Caption> element (A caption element is used to specify caption of a table). The Caption element is accessed by getElementById().
Properties:
- It has a align Attribute which is used to sets or returns the alignment of the caption.
Syntax:
document.getElementById("id");
Where “id” is the ID assigned to the Caption tag.
Example-1:
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() { var w = document.getElementById("GFG"); w.style.color = "green"; w.style.fontSize = "28px"; } </script></body></html> |
Output:
Before Clicking On Button:
After Clicking on Button:
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() { var cap = document.createElement("CAPTION"); var txt = document.createTextNode("Students"); cap.appendChild(txt); cap.style.color = "red"; cap.style.fontSize = "29px"; var tab = document.getElementById("GFG") tab.insertBefore(cap, tab.childNodes[0]); } </script></body></html> |
Output:
Before Clicking on Button:
After Clicking on Button:
Supported Browsers: The browser supported by DOM Caption Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...