HTML DOM designMode Property

Last Updated : 12 Jun, 2023

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>