codecamp

HTML DOM contentEditable 属性

HTML DOM contentEditable 属性

HTML 元素对象参考手册 元素对象

实例

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

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

尝试一下 »

定义和使用

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

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


浏览器支持

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

属性          
contentEditable 11.0 5.5 3.0 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;

x 输出结果为:

true

尝试一下 »

实例

切换 <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 属性


HTML 元素对象参考手册 元素对象

温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

HTML DOM对象

HTML DOM 引用对象

HTML DOM Password 对象

HTML DOM Link 对象

HTML DOM Select 对象

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }