HTML | DOM designMode Property

Last Updated : 24 Jul, 2019

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 the document editable or not.
```
document.designMode = "on|off";
```
Get: This property is used to return the document is editable or not.
```
document.designMode
```

Property Value: This property contains two value 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:

<!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:
Before Editing the paragraph:
designmode

After editing the paragraph:
designmode2

Example 2:

<!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() {
                var x = document.designMode;
                document.getElementById("geeks").innerHTML = x;
            }
        </script>
    </body>
</html>                    