Skip to content
Related Articles

Related Articles

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>                    


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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :