HTML - DOM Document designMode Property

Quiz

The designMode property allows us to specify if the entire document is editable or not. With this property we can edit the HTML document. It has two valid values i.e "on" and "off". By default, property value is set to off.

Syntax

The following synatx are used to get and set the design mode property.

Set the designMode

document.designMode="on";

Get the designMode

document.designMode = "on|off";

Property Values

Value	Description
off	It is the y default value. It represents document is not editable.
on	It represents document is editable.

Examples of HTML DOM Document 'designMode' Property

In the following examples we will see how we can edit the document and whether the document is editable or not.

Set the designMode

This method of designMode property allows us to edit the HTML document when value is set to "on".

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document designMode Property
    </title>
</head>
<body>
    <p> This is an editable paragraph</p>
    <script>
        document.designMode = "on";
    </script>
</body>
</html>

Get the designMode

This method of designMode property tells us whether the document is editable or not

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM document designMode Property
    </title>
</head>
<body>
    <p>
        Click to check if this document is editable:
    </p>
    <button onclick="fun()">Check</button>
    <p id="edit"></p>
    <script>
        function fun() {
            document.getElementById("edit").innerHTML = document.designMode;
        }
    </script>
</body>
</html>

Property
designMode	Yes 1	Yes 12	Yes 1	Yes 1.2	Yes 9

html_dom.htm

Print Page