HTML | DOM designMode Property
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 the document editable or not.
document.designMode = "on|off";
- Get: This property is used to return the document is editable or not.
document.designMode
Property Value: This property contains two value 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:
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:
Before Editing the paragraph:
After editing the paragraph:
Example 2:
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() { var x = document.designMode; document.getElementById("geeks").innerHTML = x; } </script> </body></html> |
Output:
Before Click on the button:
After clicking the button:
Supported Browsers: The browser supported by designMode method are listed below:
- Google Chrome 1
- Edge 12
- Internet Explorer 4
- Firefox 1
- Opera 9
- Safari 1.2
.png)
