JavaScript 的 Design Mode 是浏览器 document 对象中一个隐藏但强大的功能，它可以让任何网页实时编辑。启用后，网页会变成一个实时文本编辑器，您可以直接点击元素（如文本或图片）并对其进行修改。

以下是如何使用和体验 document.designMode 的方法：

如何启用 Design Mode

只需一行 JavaScript 即可启用 Design Mode：

document.designMode = "on";

启用后，您可以：

  • 直接编辑网页上的文本。
  • 在某些浏览器中拖动和移动元素。

要关闭 Design Mode，只需将其设置为 "off"：

document.designMode = "off";

在浏览器控制台中尝试

  1. 打开任意网站。
  2. 右键单击页面，选择 检查（或按下 Ctrl+Shift+I / Cmd+Shift+I）。
  3. 切换到 Console（控制台） 选项卡。
  4. 输入以下命令并按回车： 
    document.designMode = "on";
  5. 点击网页上的任意位置，开始编辑文本！

在 Design Mode 中可以做什么

编辑文本

直接点击任何文本，然后键入内容即可编辑。

删除内容

选中文本或元素，按下 Backspace 或 Delete 键即可删除。

添加内容

将光标放置在文本容器内，开始键入即可添加内容。

修改样式

尽管 Design Mode 本身无法直接应用样式，但您可以结合 document.execCommand() 实现加粗、斜体等效果。例如：

document.execCommand("bold");

创建更互动的示例

您可以添加一个按钮来切换 Design Mode：

<!DOCTYPE html>
<html>
<head>
  <title>Design Mode Demo</title>
</head>
<body>
  <button onclick="toggleDesignMode()">Toggle Design Mode</button>
  <p>Try editing this text!</p>
  <script>
    function toggleDesignMode() {
      document.designMode = document.designMode === "on" ? "off" : "on";
    }
  </script>
</body>
</html>

将上述代码保存为 .html 文件并在浏览器中打开，点击按钮即可切换 Design Mode。

注意事项和局限性

  1. 更改是临时的：
    使用 Design Mode 修改的内容不会永久保存，刷新页面后所有更改都会消失。

  2. 并非所有元素都可编辑：
    某些元素（如 <button> 或自定义组件）可能无法按预期工作。

  3. 浏览器兼容性：
    大多数现代浏览器支持 Design Mode，但行为可能略有不同。

通过 Design Mode，您可以轻松尝试实时编辑网页内容的功能，非常适合快速原型设计或演示。

Last modified: Monday, 13 January 2025, 3:13 PM