Open In App
Related Articles

HTML DOM designMode Property

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

The DOM designMode property in HTML is used to specify whether the document is editable or not. It can also be used to set the document editable. 

Syntax:

  • Set: This property is used to set whether the document is editable or not.
document.designMode = "on|off";
  • Get: This property is used to return whether the document is editable or not.
document.designMode

Property Value: This property contains two values which are listed below:

  • off: It is the default value. In this mode, the document is not editable.
  • on: In this mode the document is editable.

Example 1: In this example, we will use DOM designMode property.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM designMode Property
    </title>
</head>
<body style="text-align: center; ">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2>DOM designMode Property</h2>
    <p>This document is editable!</p>
 
    <!-- script to set designMode property
        editable -->
    <script>
        document.designMode = "on";
    </script>
</body>
</html>

                    

Output: 

 

Example 2: In this example, we will use the get method of designMode.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        DOM designMode Property
    </title>
  </head>
<body style="text-align: center;">
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
    <h2>DOM designMode Property</h2>
    <button onclick="myFunction()">
        Get the designMode
    </button>
    <p id="geeks"></p>
    <!-- script to display designMode -->
    <script>
        function myFunction() {
            let x = document.designMode;
            document.getElementById("geeks").innerHTML = x;
        }
    </script>
</body>
</html>

                    

Output: 

 

Supported Browsers: The browser supported by the designMode method are listed below:

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 9
  • Safari 1.2


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