HTML DOM designMode用法及代码示例

HTML中的DOM designMode属性用于指定文档是否可编辑。它也可以用来设置可编辑的文档。

用法:

Set:此属性用于设置文档是否可编辑。
```
document.designMode = "on|off";
```
Get:此属性用于返回文档是否可编辑。
```
document.designMode
```

属性值：此属性包含下面列出的两个值：

off:它是默认值。在这种模式下，文档不可编辑。
on:在这种模式下，文档是可编辑的。

范例1：

<!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>

输出：
编辑段落之前：
designmode

编辑段落后：
designmode2

范例2：

<!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>

输出：
之前单击按钮：
designmode

单击按钮后：
designmode2

支持的浏览器：下面列出了designMode方法支持的浏览器：

谷歌浏览器
IE浏览器
火狐浏览器
Opera
苹果浏览器

相关用法

注：本文由纯净天空筛选整理自Vishal Chaudhary 2大神的英文原创作品 HTML | DOM designMode Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。