Open In App
Related Articles

HTML DOM designMode Property

Improve Article
Improve
Save Article
Save
Like Article
Like

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

Property Value: This property contains two values 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: In this example, we will use DOM designMode property.

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: 

 

Example 2: In this example, we will use the get method of designMode.

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


Output: 

 

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

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Opera 9
  • Safari 1.2

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 12 Jun, 2023
Like Article
Save Article
Previous
Next
Similar Reads
Complete Tutorials