Skip to content
Related Articles

Related Articles

HTML | DOM designMode Property

View Discussion
Improve Article
Save Article
  • Last Updated : 08 Jul, 2022
View Discussion
Improve Article
Save Article

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: 

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: 

Before Editing the paragraph:

 designmode 

After editing the paragraph:

 designmode2 

Example 2: 

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() {
                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 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 9
  • Safari 1.2

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!