当前位置：首页 → 问答吧 → 如何应用文本框里面的CSS到当前页面？

如何应用文本框里面的CSS到当前页面？

时间：2010-06-06

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> body{ background:#FFCC00} .top { height:80px; line-height:80px; background:#ccc; border:5px solid #bbb; margin-bottom:10px;} </style> </head> <body> <div class="top"><h1>CSS模板代码预览</h1></div> <textarea name="" cols="60" rows="12">body{ background:#0000ff; } .top { height:80px; line-height:80px; background:#000; border:5px solid #666; margin-bottom:10px; color:#fff; } </textarea> <br /> <input type="button" value="应用到当前页面" /> </body> </html>
提示：您可以先修改部分代码再运行

我想写一个这样的例子，整个页面，无论多么复杂，可以直接在文本框里面写CSS然后预览。不知道用JS能否实现！

我试着给<style id="css"> 起个名字，然后改变里面的内容，但是好像不行，不知道有什么方法呢？

作者: cssbbs 发布时间: 2010-06-06

没有人知道么？

作者: cssbbs 发布时间: 2010-06-06

试试下面这个

<!DOCTYPE html> <html language="zh-CN"> <head> <meta charset="gb2312" /> <title>更新css</title> <meta name="author" content="XeonWell" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <base href="http://www.xw81.com/" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ $("head").append("<style type='text/css'></style>"); $("#pb").click(function(){ $("style").replaceWith("<style type='text/css'>" + $("#p").val() + "</style>"); }); $("#pb").click(); }); </script> </head> <body> <div id="t"> ID为t的框 </div> <div id="pd"> <textarea id="p" cols="100" rows="20"> * { margin:0; padding:0; } body { background:url(http://www.xw81.com/works/960_Grid/Grid-960.png) top center repeat-y; width:960px; margin:5em auto; } #t { border:2px solid red; width:200px; height:200px; -moz-border-radius:1em; -webkit-border-radius:1em; border-radius:1em; } #pd { padding-top:2em; } </textarea><br /> <input type="button" value="预览(P)" accesskey="p" id="pb" /> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: xeonwell 发布时间: 2010-06-06

如何应用文本框里面的CSS到当前页面？

热门阅读

热门下载