HTML | DOM Kbd Object
The Kbd Object in HTML DOM is used to represent the HTML <kbd> element. The <kbd> tag is the phrase tag and used to define the keyboard input. The text enclosed by <kbd> tag is typically displayed in the browser’s default monospace font. The <kbd> element can be accessed by using the getElementById() method.
Syntax:
document.getElementById("ID")
Where ID is assigned to the <kbd> tag.
Example 1:
html
<!DOCTYPE html> <html> <head> <title> HTML DOM Kbd Object </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <h2>DOM Kbd Object</h2> <kbd id = "GFG"> GeeksforGeeks:A computer Science Portal for Geeks </kbd> <br><br> <button onclick = "myGeeks()"> Submit </button> <script> function myGeeks() { var txt = document.getElementById("GFG"); txt.style.color = "red"; txt.style.fontSize = "25px"; } </script> </body> </html> |
Output:
Before Click on the button:
After Click on the button:
Example 2: Kbd Object can be created by using the document.createElement Method.
html
<!DOCTYPE html> <html> <head> <title> HTML DOM Kbd Object </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <h2>DOM Kbd Object</h2> <button onclick = "myGeeks()"> Submit </button> <script> function myGeeks() { var ele = document.createElement("KBD"); var txt = document.createTextNode("GeeksforGeeks:A "+ "computer Science Portal for Geek"); ele.appendChild(txt); document.body.appendChild(ele); } </script> </body> </html> |
Output:
Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by DOM Kbd Object are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Please Login to comment...