轻松上手,快乐学习!
HTML CSS JAVASCRIPT SQL PYTHON MYSQL PHP GIT 问答 工具 导航 更多 实例 参考

HTML DOM contentEditable 属性

实例

设置 <p> 元素内容为可编辑:

document.getElementById("myP").contentEditable = "true";
亲自试一试 »

页面下方有更多实例。

定义和用法

contentEditable 属性用于设置或返回元素的内容是否可编辑。

提示： 你也可以使用isContentEditable 属性来查看元素的内容是否可编辑。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器的版本号。

属性
contentEditable 11.0 6.0 3.5 3.2 10.6

语法

返回 contentEditable 属性:

HTMLElementObject.contentEditable

设置 contentEditable 属性:

HTMLElementObject.contentEditable = true|false

属性值

值 描述
true|false 描述元素的内容是否可编辑。

可能值：
  • "inherit" - 默认。如果父级元素是可编辑，则子元素内容也是可编辑的。
  • "true" - 内容可编辑
  • "false" - 内容不可编辑

技术细节

返回值: 布尔值，如果元素是可编辑的返回 true，否则返回 false

更多实例

实例

查看 <p> 元素是否可编辑:

var x = document.getElementById("myP").contentEditable;
亲自试一试 »

实例

切换 <p> 元素的编辑状态：

var x = document.getElementById("myP");
if (x.contentEditable == "true") {
  x.contentEditable = "false";
  button.innerHTML = "Enable content of p to be editable!";
} else {
  x.contentEditable = "true";
  button.innerHTML = "Disable content of p to be editable!";
}
亲自试一试 »