JavaScript设置或获取内容编辑属性|Element contentEditable 属性

由 hcduguo

元素对象参考手册

定义与用法

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

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

语法格式

获取 contentEditable 属性:

HTMLElementObject.contentEditable

设置 contentEditable 属性:

HTMLElementObject.contentEditable=true|false

示例代码

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

document.getElementById("myP").contentEditable = true;

亲自试试

浏览器支持

属性Google ChromeInternet ExplorerFirefoxSafariOpera
contentEditable11.05.53.03.210.6

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

属性值

值描述
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 = "p 元素内容可编辑!";
} else {
    x.contentEditable = "true";
    button.innerHTML = "p 元素内容不可编辑!";
}

亲自试试

相关页面

HTML 参考手册: HTML contenteditable 属性

元素对象参考手册

相关