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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。