Javascript 使用jQuery创建新（而不是更改）样式表
我们有一个我构建的小工具，您可以在其中编辑一个字段中的jQuery模板和另一个字段中的JSON数据，然后点击按钮立即在浏览器中查看结果 我真的需要扩展它，这样设计师就可以在另一个字段中编辑完整的CSS样式表，当我们呈现模板时，它会将CSS应用到模板上。我们的想法是，一旦我们得到了好的结果，我们就可以获取这三个字段的内容，将它们放在文件中，并在我们的项目中使用它们 我找到了jQuery.cssRule插件，但它看起来基本上已经被放弃了（所有的链接都没有了，三年内也没有开发）。有更好的游戏吗？还是这是镇上唯一的游戏Javascript 使用jQuery创建新（而不是更改）样式表,javascript,jquery,css,stylesheet,Javascript,Jquery,Css,Stylesheet,我们有一个我构建的小工具，您可以在其中编辑一个字段中的jQuery模板和另一个字段中的JSON数据，然后点击按钮立即在浏览器中查看结果 我真的需要扩展它，这样设计师就可以在另一个字段中编辑完整的CSS样式表，当我们呈现模板时，它会将CSS应用到模板上。我们的想法是，一旦我们得到了好的结果，我们就可以获取这三个字段的内容，将它们放在文件中，并在我们的项目中使用它们 我找到了jQuery.cssRule插件，但它看起来基本上已经被放弃了（所有的链接都没有了，三年内也没有开发）。有更好的游戏吗？还是这
注意：我们正在寻找这样的东西：有人在这里输入传统的CSS样式表数据，并立即用于在页面中呈现，可以随意编辑和更改，旧规则消失，新规则取而代之。我不是在寻找设计师必须学习jQuery语法并在jQuery中输入单独的.css（“属性”、“值”）类型调用的东西。当然，只需在头部附加一个
样式标记即可：
$("head").append("<style>p { color: blue; }</style>");
请参见操作。如果用户应该能够编辑整个样式表，而不仅仅是单个样式属性，那么您可以将输入的样式表存储在临时文件中，并使用
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
$（'head'）。追加（''）；
听起来你想为css编写一个解释器？如果它是手工输入文本的，那么以后使用它将非常简单，只需复制并粘贴到css文件中即可
因此，如果您的页面上有一个文本区域可以输入css，并且希望在按下按钮时应用这些规则，那么您可以使用类似这样的内容（只有伪代码，需要工作）：
然后，您可以编写一些东西来遍历设计器键入的每个元素，并获取当前的css规则（包括使用上面代码段之类的代码应用的规则），然后从中创建一个css字符串，然后将其输出或保存到db中。这是一件痛苦的事，而且在子字符串上做得太多了，但不幸的是，我不知道有什么更快更有效的方法
希望这至少能给你一些想法实现这一点最干净的方法是将用户生成的内容沙箱化到
中。这样，对CSS的更改不会影响编辑器。（例如，input{display:none；}
无法断开页面。）
只需呈现您的HTML（包括文档
中的CSS），并将其写入
变量i=$（'预览'）[0]；
var doc=i.contentWindow | | i.contentDocument；
如果（doc.document）doc=doc.document；
文档打开（'text/html'，true）；
文件写入（“…”）；
doc.close（）；
您是否正在创建一个JSFIDLE克隆？除了关注CSS、jQuery模板和JSON数据之外，还有一些相似之处。在JSFIDLE中，关注点是CSS、HTML和JavaScript。出于其他原因，我曾经尝试过关注JSFIDLE，它是一个相当复杂的系统。显然它可以工作，但我不想尝试提取它们是什么使用（如果事实上它可以被提取）。真的吗？有那么简单吗？我可以在中使用某种标记来告诉我要添加什么（然后替换，因为这是一个非常迭代的工具）.@John我的编辑可能是你想要的，但我不确定我是否理解你的要求。你的编辑非常出色。这是我的叉子，我用一段单独的文本（具有多种样式）显示它这可能很容易来自文本区域：好吧，现在我想这是我对JSFIDLE的最后一次编辑。它通过创建一个文本区域，让您编辑其中的示例CSS，然后点击一个按钮立即更改HTML的外观，而无需刷新。iframe为您提供了这种隔离，这是绝对正确的不太可能将其作为一个选项。但这也有一个缺点，因为iFrame不会自动调整到包含的材质。@John:当然可以：i.style.height=doc.body.offsetHeight+'px'；
很有意思。我必须尝试一下。这对我们来说不是一个好的解决方案，因为目前没有涉及服务器。
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();