Open In App

HTML DOM Kbd Object

Improve
Improve
Like Article
Like
Save
Share
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