Javascript 用户输入的CSS

我正在尝试制作一个应用程序，用户可以在其中输入自己的CSS，然后说CSS将应用于网页。有没有一种简单的方法可以做到这一点，或者我必须手动解析CSS并手动编辑，比如说，

的document.getElementById（elid）.style

---

谢谢。

我不确定这是否是一个好的做法，但为什么不创建一个样式元素呢

var css = userinputhere;
var stylez = document.createElement("style");
stylez.type = 'text/css';
if (stylez.styleSheet) stylez.styleSheet.cssText = css;
else stylez.appendChild(document.createTextNode(css));

创建元素，设置type属性，然后将

css

附加到

cssText

属性（如果浏览器支持），否则创建文本节点并附加它

---

请注意，这取决于您如何进行消毒，并确保用户输入是安全的。也不要忘记将样式附加到head标记。

我不确定这是否是一种好的做法，但为什么不创建一个样式元素呢

var css = userinputhere;
var stylez = document.createElement("style");
stylez.type = 'text/css';
if (stylez.styleSheet) stylez.styleSheet.cssText = css;
else stylez.appendChild(document.createTextNode(css));

创建元素，设置type属性，然后将

css

附加到

cssText

属性（如果浏览器支持），否则创建文本节点并附加它

---

请注意，这取决于您如何进行消毒，并确保用户输入是安全的。也不要忘记将样式附加到head标记。

假设它只是一个临时更改（仅针对该页面视图），您可以使用javascript修改它

<script>
function appendCss() {
    var css = document.getElementById('css-input').value;
    var style = document.createElement("style");
    style.innerHTML = css;
    var head = document.getElementsByTagName("head");
    head[0].appendChild(style)
}
</script>

函数appendCss（）{
var css=document.getElementById（'css-input'）。值；
var style=document.createElement（“样式”）；
style.innerHTML=css；
var head=document.getElementsByTagName（“head”）；
头[0]。追加子项（样式）
}

---

然后，当希望css生效时，只需调用函数appendCss（）。同样，这只适用于该页面视图，它不会是永久的。

假设它只是一个临时更改（仅适用于该页面视图），您可以使用javascript修改它

<script>
function appendCss() {
    var css = document.getElementById('css-input').value;
    var style = document.createElement("style");
    style.innerHTML = css;
    var head = document.getElementsByTagName("head");
    head[0].appendChild(style)
}
</script>

函数appendCss（）{
var css=document.getElementById（'css-input'）。值；
var style=document.createElement（“样式”）；
style.innerHTML=css；
var head=document.getElementsByTagName（“head”）；
头[0]。追加子项（样式）
}

---

然后，当希望css生效时，只需调用函数appendCss（）。同样，这只适用于该页面视图，不会永久使用。

我认为这取决于您是否希望css永久应用或仅在网页中应用。这是一个非常广泛的问题。您必须解析一些CSS，只是为了检查它。以这样的方式定义页面：元素有类。然后简单地改变样式表。例如，它可以按每个用户存储，并专门为每个用户输出。这是一个非常广泛的问题。你能保存CSS文件吗？您希望此CSS应用于web上的任何页面吗？需要更多信息。你想让别人上传css文件吗？或者他们应该在表单中键入css？css会立即应用于当前页面吗？或者它将永久应用于该网站？我能想到更多的问题。。。请具体点，我认为这取决于你是否希望css永久应用，或者仅仅在网页的加载中，这是一个非常广泛的问题。您必须解析一些CSS，只是为了检查它。以这样的方式定义页面：元素有类。然后简单地改变样式表。例如，它可以按每个用户存储，并专门为每个用户输出。这是一个非常广泛的问题。你能保存CSS文件吗？您希望此CSS应用于web上的任何页面吗？需要更多信息。你想让别人上传css文件吗？或者他们应该在表单中键入css？css会立即应用于当前页面吗？或者它将永久应用于该网站？我能想到更多的问题。。。请具体说明。当您反复调用appendCss时，最好设置样式节点的id或在代码中存储对它的引用，以便分离以前的样式。谢谢。我没有考虑在正文中附加内容：PAlso当您反复调用appendCss时，最好设置样式节点的id或在代码中存储对它的引用，以便分离以前的样式。谢谢。我没想过要把它附在身体上：P