In this section, we will learn what the document designMode property is and how to use it in JavaScript.

What is document designMode Property in JavaScript?

The JavaScript document designMode property is used to set or get the design mode of an HTML document.

By default, the design mode in a document is set to off. That means if there’s an element like a paragraph on a page, you can’t just select the paragraph and add to or remove its content. But when the design mode is set to on, that means we can change the content in an HTML document.

So, using this property, we can control the design mode of an HTML document.

document designMode Property Syntax:

document.designMode;

document.designMode = “on|off”

document designMode Property Input Values

The designMode property can take two types of values:

• “on”: if the value is set to on, that means the design mode in an HTML document is active and we can change the content right on the page.
• “off”: but if the value is set to “off”, that means the design mode in an HTML document is off and so we can’t change the content on the page.

document designMode Property Return Value

The return value of this method, if it’s called, would be either “on” or “off”.

The value “on” means the design mode is active and the value “off” means otherwise.

Example: using document designMode Property in JavaScript

See the Pen using document designMode Property in JavaScript by Omid Dehghan (@odchan1) on CodePen.