Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM designMode property
The HTML DOM designMode property allows us to specify if the entire document is editable or not. This makes the HTML document act as a WYSIWYG (What You See Is What You Get) editor as we can edit the HTML document. This property is by default set to “off” and by setting it to “on” we can edit the document.
Syntax
Following is the syntax for −
Setting the designMode property −
document.designMode = "on|off"
Here, “off” is the default value and setting it to “on” allows us to edit the document.
Example
Let us look at an example for the HTML DOM designMode property −
<!DOCTYPE html> <html> <body> <h1>Document designMode Property</h1> <p> This is a paragraph with some text</p> <button type="button">BUTTON1</button> <script> document.designMode="on"; </script> </body> </html>
Output
This will produce the following output −
After editing the document −
In the above example −
We have created several HTML elements. For example, An <h1> element, a <p> and a <button> element −
<h1>Document designMode Property</h1> <p> This is a paragraph with some text</p> <button type="button">BUTTON1</button>
We have then set the document.designMode to “on” which allows us to edit our HTML document. We can now change any text and even remove the elements by clearing their text.
Eg: By removing the button text the button will be removed too.
<script> document.designMode="on"; </script>
66 Views
