Question

我正在为Web技术课程构建HTML / CSS / JS的在线代码编辑器。我使用ACE编辑器为3个相应的编辑器从中获取用户提交的代码并重写div的内容（实时。一切都发生在客户端，所以我不能保存规则并导入它们（可能？）。

我很难应用用户输入到div的css规则来显示结果。对于HTML部分，我从HTML编辑器中获取代码并用结果重写div的代码。我搜索了使用jQuery的解决方案，但我尝试的一切都失败了。

关于如何实现类似内容的任何想法？

var text2=editor2.getValue(); //Get the css rules that the user entered.
var newstyle=document.createElement("style"); //Create a <style> element
newstyle.innerHTML=text2;  //Add the rules in that element.

然后，如果我正确理解了我在网上找到的相关答案，我需要在代码的头部添加newstyle元素，并将结果写入div。我已尝试过像下面这样的东西，但我似乎无法做到正确：

var t=document.getElementById("result"); //The div with the result of the code
t.appendChild(newstyle);

我想我缺少的是一种在head元素中插入样式元素的方法。

Answer 1

试试这个：http://jsfiddle.net/7ku10n0t/27/

可以使用document.head.appendChild将元素插入头部。但是，您要确保不要多次尝试插入元素，这会（取决于浏览器）可能会导致一些时髦的事情发生。

  <div>
        <textarea id="editor2" onblur="changeStyles();" style="width: 300px; height: 100px;"></textarea>
        <p class="class1">This is class 1</p>
        <p class="class2">This is class 2</p>
    </div>

<div>
    <textarea id="editor2" onblur="changeStyles();" style="width: 300px; height: 100px;"></textarea>
    <p class="class1">This is class 1</p>
    <p class="class2">This is class 2</p>
</div>

<script>    
function doOnLoad() {
    var newstyle = document.createElement("style"); //Create a <style> element
    newstyle.id = "customStyle";
    document.head.appendChild(newstyle);
};
// best practice is really to call this on DOMContentLoaded ($() for jquery)
doOnLoad();

function changeStyles() {
    var newstyle = document.getElementById("customStyle");
    var text2 = editor2.value; //Get the css rules that the user entered.
    newstyle.innerHTML = text2;  //Add the rules in that element.
}
</script>

Answer 2

如果您有HTML代码，可以使用jQuery(...).append()或jQuery(...).prepend()将其插入您的DOM。

要在<head>标记中添加一个CSS块，您可以编写如下内容：

jQuery("head").append(new_style);

如果您希望将其添加到result块，可以使用：

jQuery("#result").prepend(new_style);

prepend()用于在开头添加它。

有关详细信息，请参阅文档：

http://api.jquery.com/

如何在用户输入规则后在div中动态应用css规则

2 个答案: