style 也是标签（在非ie内核的浏览器中支持），我们将style设置成 contenteditable的时候，那么那的内容就可以编辑了。仔细的体验下，如果我们将背景修改成红色的。那么只要书写完，立马呈现。哇靠，这很方 便我们以后写那种动态的编辑器效果呢，等有时间的话，我再试试。
效果演示
附上我研究的代码：
01 |
<!DOCTYPE HTML> |
02 |
<html > |
03 |
<head> |
04 |
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
|
05 |
<title></title> |
06 |
<style type="text/css">
|
07 |
body style { |
08 |
display: block;
|
09 |
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> |
想了解更多，可以去这里看看。
本文使用的并非body，而是div，相关代码如下：
01 |
<style type="text/css">
|
02 |
.test_div style { |
03 |
display: block;
|
04 |
background: #333;
|
05 |
color: white;
|
06 |
font: 14px/1.8 Courier New;
|
07 |
padding: 20px;
|
08 |
white-space: pre;
|
09 |
margin:0 auto;
|
10 |
width:250px;
|
11 |
height:100px;
|
12 |
} |
13 |
</style> |
14 |
15 |
<div class="test_div"><style contenteditable>.test_div {background: green;}</style></div>
|
Have fun.