HTML | DOM designMode Property

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>                     

Output:
Before Click on the button:
designmode

After clicking the button:
designmode2

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

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: