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.