css style标签所见即所得

最新推荐文章于 2021-09-25 15:20:13 发布

weixin_34203426

最新推荐文章于 2021-09-25 15:20:13 发布

阅读量116

点赞数

本文介绍了一种利用contenteditable属性实现在浏览器中直接编辑样式的方法，并通过一个简单的HTML示例展示了如何让style标签内的内容变得可编辑。这种方法为创建动态编辑器提供了便捷途径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

style 也是标签（在非ie内核的浏览器中支持），直接上图

我们将style设置成 contenteditable的时候，那么那的内容就可以编辑了。仔细的体验下，如果我们将背景修改成红色的。

那么只要书写完，立马呈现。哇靠，这很方便我们以后写那种动态的编辑器效果呢，等有时间的话，我再试试。附上我研究的代码：

1 <! DOCTYPE HTML >
2 < html >
3 < head >
4      < meta http-equiv ="Content-Type" content ="text/html;charset=gb2312" />
5      < title ></ title >
6      < style type ="text/css" >
7     body style {
8         display : block ;
9         background : #333 ;
10         color : white ;
11         font : 13px/1.8 Monaco, Mono-Space ;
12         padding : 20px ;
13         white-space : pre ;
14         margin : 0 auto ;
15         width : 500px ;
16         height : 100px ;
17 }
18      </ style >
19 </ head >
20 < body >
21      < style contenteditable > body { background : green ; } </ style >
22 </ body >

23 </html>

参考文章：http://css-tricks.com/show-and-edit-style-element/