使用 jQuery 创建新的（不更改）样式表答案

【问题标题】：Create new (not change) stylesheets using jQuery使用 jQuery 创建新的（不更改）样式表
【发布时间】：2011-08-19 14:16:35
【问题描述】：

我们有一个我构建的小工具，您可以在其中编辑一个字段中的 jQuery 模板和另一个字段中的 JSON 数据，然后单击按钮立即在浏览器中查看结果。

我确实需要扩展它，以便设计师可以在另一个字段中编辑完整的 CSS 样式表，当我们渲染模板时，它会应用 CSS。我们的想法是，一旦我们得到了好的结果，我们就可以将这三个字段的内容放入文件中，然后在我们的项目中使用。

我找到了 jQuery.cssRule 插件，但它看起来基本上被废弃了（所有链接都无处可去，三年没有开发）。有没有更好的游戏，还是镇上唯一的游戏？

注意：我们正在寻找可以在这里输入传统 CSS 样式表数据并立即用于在页面内呈现的内容，并且可以随意编辑和更改旧规则和新规则他们的代替。我不是在寻找设计人员必须学习 jQuery 语法并输入对 jQuery 的单个 .css("attribute", "value") 类型调用的东西。

【问题讨论】：

您是否正在创建一个 JSFiddle 克隆？
除了侧重于 CSS、jQuery 模板和 JSON 数据外，其他地方有相似之处。在 jsFiddle 中，重点是 CSS、HTML 和 JavaScript。由于其他原因，我之前尝试过查看 jsFiddle，它是一个相当复杂的系统。显然它有效，但我不想尝试提取他们正在使用的任何内容（如果实际上可以提取）。

标签： javascript jquery css stylesheet

【解决方案1】：

当然，只需在头部附加一个style 标记即可：

$("head").append("<style>p { color: blue; }</style>");

看到它在行动here。

您可以使用以下内容替换动态添加的 style 标记中的文本：

$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);

查看实际情况here。

【讨论】：

真的吗？就这么简单吗？我可以在中添加一些标记来告诉我要添加什么（然后替换，因为这是一个非常迭代的工具）。
@John 我的编辑可能是您想要的，但我不确定我是否理解您的要求。
您的编辑非常出色。这是我的叉子，我用一段单独的文本（具有多种样式）显示它，这很容易来自文本区域：jsfiddle.net/JohnMunsch/XH2uf
好的，现在我认为这是我对 jsFiddle 的最终编辑。它通过创建一个文本区域，让您在其中编辑示例 CSS 并点击一个按钮来立即更改 HTML 的外观而无需刷新。

【解决方案2】：

实现此目的的最简单方法是将用户生成的内容沙箱化到 <iframe> 中。这样，对 CSS 的更改不会影响 编辑器。（例如，input { display:none; } 不能破坏您的页面。）

只需渲染您的 HTML（包括文档<head> 中的 CSS，然后将其写入 <iframe>。

Example:

<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();

【讨论】：

您对 iframe 为您提供这种隔离是绝对正确的，我正在考虑将其作为一个选项。但这也有一个缺点，因为 iframe 不会自动调整大小以适应包含的材料。
@John：当然可以：i.style.height = doc.body.offsetHeight + 'px';
有趣。我得试试看。

【解决方案3】：

如果用户应该能够编辑整个样式表，而不仅仅是单个样式属性，那么您可以将输入的样式表存储在一个临时文件中并使用

将其加载到您的 html 文档中

$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');

【讨论】：

这对我们来说不是一个好的解决方案，因为目前没有涉及到服务器。

【解决方案4】：

听起来你想为 css 写一个解释器？如果是手工输入的文本，那么以后使用它就像复制粘贴到一个css文件一样简单。

因此，如果您的页面上有一个 textarea 可以输入 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});
  });
});

然后你可以写一些东西来检查你的设计师输入的每个元素，并获取它的当前 css 规则（包括你使用像上面的 sn-p 之类的代码应用的那些）并从中创建一个 css 字符串然后可以输出或保存在数据库中。使用子字符串很痛苦，而且很麻烦，但不幸的是我不知道更快或更有效的方法。

希望这至少能给你一些想法

【讨论】：