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>                     