Question

我试图创建一个用户可以输入自己的CSS的应用程序，然后将CSS应用于网页。有没有一种简单的方法可以做到这一点，或者我是否必须手动解析CSS并手动编辑，比如document.getElementById(elid).style #elid？

感谢。

Answer 1

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

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标签上。

Answer 2

假设它只是一个临时更改（仅适用于该页面视图），您可以使用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>

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

用户输入的CSS

2 个答案: