HTML | DOM Figcaption Object
The Figcaption Object in HTML DOM is used to represent the HTML <figcaption> element. The figcaption element is accessed by getElementById().
Syntax:
document.getElementById("ID");
Where ID represent the element id.
Example 1:
<!DOCTYPE html> <html> <head> <title> HTML DOM figcaption Object </title> <style> body { text-align:center; } h1 { color:green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>DOM Figcaption Object</h2> <figure> <img src= alt="gfglogo" style="width:50%"> <figcaption id = "GFG"> GeeksforGeeks Logo </figcaption> </figure> <button onclick = "Geeks()"> Submit </button> <script> function Geeks() { var gfg = document.getElementById("GFG"); gfg.style.color = "green"; gfg.style.fontSize = "20px"; } </script> </body> </html> |
Output:
Before Click on the button:
After Click on the Button:
Example 2: Figcaption Object can be created by using the document.createElement Method.
<!DOCTYPE html> <html> <head> <title> HTML DOM figcaption Object </title> <style> body { text-align:center; } h1 { color:green; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>DOM Figcaption Object</h2> <figure> <img src = alt = "gfglogo" style = "width:50%"> </figure> <button onclick = "Geeks()"> Submit </button> <!-- script to add figcaption object --> <script> function Geeks() { var x = document.createElement("FIGCAPTION"); var y = document.createTextNode("GeeksForGeeks Logo") x.appendChild(y); x.style.color = "green"; document.body.appendChild(x); } </script> </body> </html> |
Before Click on the Button:
After Click on the Button:
Supported Browsers: The browser supported by DOM Figcaption Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...