Skip to content
Related Articles

Related Articles

HTML | DOM accessKey Property

View Discussion
Improve Article
Save Article
  • Last Updated : 12 Aug, 2022
View Discussion
Improve Article
Save Article

The DOM accessKey property is used to set or return the accesskey attribute of an element. 

Syntax :

  • For Set the accessKey :
HTMLElementObject.accessKey = value
  • For Return the accessKey :
HTMLElementObject.accessKey

Value :

  • character: Character that is used to specify the shortcut-key.

Return Value : This will return the selected element with the attached accessKey. 

Example-1: This example shows that how a accessKey is attached to a selected element. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM accessKey Property
    </title>
    <style>
        body {
            width: 90%;
            color: green;
            border: 2px solid green;
            height: 40%;
            font-weight: bold;
            text-align: center;
            padding: 30px;
            font-size: 20px;
        }
    </style>
</head>
 
<body>
 
    <a id="main"
       href="https://www.geeksforgeeks.org">
      GeeksforGeeks
    </a>
    <br>
 
    <p>
        This example show how to attach
        an accessKey to a selected element.
    </p>
 
    <script>
        document.getElementById("main").accessKey = "g";
    </script>
 
</body>
 
</html>


Output : 

Before Click:

  

After Click:

  Example-2: This example shows that how check that which accessKey is attached to a selected element. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM accessKey Property
    </title>
    <style>
        div {
            width: 80%;
            color: green;
            border: 2px solid green;
            height: 40%;
            font-weight: bold;
            text-align: center;
            padding: 30px;
            font-size: 20px;
        }
         
        #p1 {
            width: 130px;
            height: 20px;
            display: block;
            background-color: lightgrey;
            float: right;
            margin-top: -10px;
            padding: 5px;
        }
         
        #d {
            color: black;
        }
    </style>
</head>
 
<body>
    <div>
        <a id="main" accesskey="g"
           href="https://www.geeksforgeeks.org">
          GeeksforGeeks
        </a>
 
        <p>
          Click the button to get the
          accesskey of the link.
      </p>
        <p id="p1">Answer : <span id="d">
          </span>
        </p>
    </div>
    <br>
 
    <input type="button" onclick="myFunction()"
           value="Click Me.!" />
 
    <script>
        function myFunction() {
            var gfg =
                document.getElementById("main").accessKey;
            document.getElementById("d").innerHTML = gfg;
        }
    </script>
 
</body>
 
</html>


Output: 

Before Click:

  

After Click:

  

Note: The shortcut varies from browsers to browsers.

  • Mozilla Firefiix: ALT + SHIFT + accesskey
  • Google Chrome: ALT + accesskey
  • Opera 15+: ALT + accesskey
  • Safari: ALT + accesskey
  • IE: ALT + accesskey

Supported Browser: The browser supported by DOM accessKey Property are listed below.

  • Google Chrome 17 and above
  • Edge 12 and above
  • Internet Explorer 5.5 and above
  • Firefox 5 and above
  • Opera 12.1 and above
  • Safari 6 and above

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!