网页只是浏览器显示的文档。 在开发的时候,想直接在网页上进行修改,一般是调出 DevTools,在元素上修改看效果。但其实还有更方便的方法可以直接在页面上进行修改,也不需要浏览器安装扩展程序,它是每个现代浏览器如 Google Chrome、Safari、Firefox 都内置的功能。

这个功能是利用了“ document.designMode”功能,您可以通过浏览器的JavaScript 控制台中启用该功能。允许您直接编辑整个文档,此属性默认情况下设置为 off,让我们将其更改为 on。

document.designMode="on"

也可以使用另一个代码,也能达到相同的效果。

document.body.contentEditable = true