Open In App
Related Articles

HTML DOM Kbd Object

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

The Kbd Object in HTML DOM is used to represent the HTML <kbd> element. The <kbd> tag is the phrase tag and is used to define the keyboard input. The text enclosed by the <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: In this example, we will use DOM Kbd Object.

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() {
            let txt = document.getElementById("GFG");
            txt.style.color = "red";
            txt.style.fontSize = "25px";
        }
    </script>
</body>
</html>

                    

Output: 

 

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() {
            let ele = document.createElement("KBD");
            let txt = document.createTextNode("GeeksforGeeks:A " +
                "computer Science Portal for Geek");
            ele.appendChild(txt);
            document.body.appendChild(ele);
        }
    </script>
</body>
</html>

                    

Output: 

 

Supported Browsers: The browser supported by DOM Kbd Object are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari


Last Updated : 14 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads