先看例子,我们可以在里面填写样式属性,就能实现修改就当前页面的样式UI,比如:
大家可以试着改变里面css属性,就马上看到效果,是不是觉得很神奇,这是如何实现的呢?其实只是一个style的标签就可以搞定,代码如下:
<style contenteditable style="display: block;width: 100%; white-space: pre;">
html{
background: #f1f2f3;
}</style>
是不是很简单。
简单说明:
<style> 标签用于为 HTML 文档定义样式信息。在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。
contentEditable是html中的一个属性。设置html的contentEditable="true"时,即可开启该元素的编辑模式。
white-space:pre的作用是保持源码中的空格,有几个空格算几个空格显示,同时换行只认源码中的换行和<br/>标签。