使用jQuery创建新的(而不是更改)样式表

Create new (not change) stylesheets using jQuery

本文关键字：样式 创建 jQuery 使用      更新时间：2023-09-26

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

我真的需要扩展这一点，虽然这样设计人员可以编辑一个完整的CSS样式表在另一个字段，当我们渲染模板，它将有CSS应用到它。我们的想法是，一旦我们得到了好的结果，我们就可以把这三个字段的内容放在文件中，并在我们的项目中使用它们。

我找到了jQuery。cssRule插件，但看起来它基本上被抛弃了(所有的链接都无处可去，三年来没有任何发展)。有更好的办法吗，还是只有这个办法?

注意:我们正在寻找的东西，有人键入传统的CSS样式表数据在这里，这是立即用于渲染内的页面，可以编辑和更改随著旧的规则消失和新使用的代替。我不寻找的东西，设计师必须学习jQuery语法，并输入单独的。css("attribute"， "value")类型调用jQuery。

当然，只要在头部添加一个style标签:

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

在这里看到它的作用

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

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

实现这一目标的最干净的方法是将用户生成的内容沙箱放入<iframe>中。这样，对CSS的更改就不会影响编辑器。(例如，input { display:none; }不能打破你的页面。)

只是呈现你的HTML(包括CSS在文档的<head>，并写入<iframe>。

的例子:

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

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

将其加载到html文档中
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');

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

所以如果你的页面上有一个文本区来输入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规则(包括那些你使用一些代码，如上面的片段)，并创建一个CSS字符串，然后可以输出或保存在数据库中。处理子字符串很痛苦，而且很麻烦，但不幸的是，我不知道有什么更快或更有效的方法。

希望这至少能给你一些启发

相关文章：