16. Element contentEditable 属性
2015-08-06 10:56
471 查看
实例
定义和用法
contentEditable 属性设置或返回元素内容是否可编辑。
提示:您也可以使用 isContentEditable 属性来查明元素内容是否可编辑。
例子 2
对是否能够对 < p> 元素的内容进行编辑进行切换:
把 <p> 元素的内容设置为可编辑: document.getElementById("myP").contentEditable = true;
<!DOCTYPE html> <html> <body> <p id="myP">这是一个段落。请点击按钮进行编辑。</p> <button onclick="myFunction()">试一下</button> <p id="demo"></p> <script> function myFunction() { document.getElementById("myP").contentEditable = true; document.getElementById("demo").innerHTML = "现在这个 p 元素可编辑。请尝试改变其文本。"; } </script> </body> </html>
定义和用法
contentEditable 属性设置或返回元素内容是否可编辑。
提示:您也可以使用 isContentEditable 属性来查明元素内容是否可编辑。
例子 2
对是否能够对 < p> 元素的内容进行编辑进行切换:
<!DOCTYPE html> <html> <body> <p id="myP" contenteditable="true">请尝试改变此文本。</p> <button onclick="myFunction(this);">禁用 p 元素文本编辑!</button> <p id="demo"></p> <script> function myFunction(button) { var x = document.getElementById("myP"); if (x.contentEditable == "true") { x.contentEditable = "false"; button.innerHTML = "启用 p 元素文本编辑!"; } else { x.contentEditable = "true"; button.innerHTML = "禁用 p 元素文本编辑!"; } } </script> </body> </html>
相关文章推荐
- 该登录名来自不受信任的域,不能与 Windows 身份验证一起使用。
- AD管理-兰晓宇-专题视频课程
- 【Cocos2d入门教程三】HelloWorld之一目了然
- ulimit -a详解
- hive DATEDIFF NULL
- sql触发器(insert,update,delete)
- Web.xml配置详解之context-param
- HDU 4323
- Basic vi Commands
- Elasticsarch及插件安装
- 对于Unicode编码在js中和html中
- cakePHP 分页栏
- Android:WebView(慕课网)
- redis 内存库设置 教你怎么解决64位Windows版Redis狂占C盘的问题.
- 迁移至个人blog
- Win10正式版死机运行程序无响应该怎么办?
- 为zabbix增加服务器信息统计(服务器品牌、型号、SN号等)
- Asynctask解析以及注意事项
- Ext.Ajax.Request 如何将response.responseText作为函数返回值返回?
- Java链接Sql数据库