html编辑css、div代替文本域
在浏览器窗口中可以修改style的样式,并且网页会同步显示效果,这样做并没有什么实际的开发用途,只是一个比较好玩的html知识。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body style { display: block;/*让样式在html页面中可以显示*/ white-space: pre-wrap;/*让样式在html页面中换行 显得美观*/ } </style> </head> <body> <style contenteditable="true">/*让样式在html页面中可以被编辑*/ .div { height: 400px; color: #f00; font-size: 18px; } </style> <div class="div"> 我是div中的内容 </div> </body> </html>
这样样式就可以在html页面中编辑了,所操作的元素样式也会及时改变。
contenteditable 属性是html5的一个全局属性,规定是否可编辑元素的内容,并不经常使用,谁没事会允许别人修改自己的网页。
但是有一个用途是,它可以替代textare这个标签的用途,html中的textare元素默认不会随着输入的行数自动增高,这在某些用途下不方便,例如写对话框,特点是在一定高度内可以随着输入的行数增高。这个功能使用textarea做会很麻烦,所以可以使用一个可编辑的div框来代替。
<div contenteditable="true"> 我是可编辑的div框 </div>
这样可以控制div的样式模拟输入文本域,取值设值的使用可以用innerHTML或者jquery的text()、html()等方法。重要的是可以设置max-height属性,在最大高度内允许自动增高。
个人总结笔记,有误请指出,谢谢!