是否可以在项目中将 CSS 字符串文本更改为 CSS 代码？

Question

我想将 String 变量中的网站源代码转换为代码并使用它。

我该怎么做？

var cssStr = 'a{text-decoration: none}';

// to css code

a {
   text-decoration: none
}

Answer 1

试试这个：

var cssStr = 'a{text-decoration: none} a{color: red}';

let text = document.getElementById('yourId');
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = cssStr;
text.appendChild(style);

<a href=# id="yourId"><p> Your Text </p></a>

Answer 2

你可以有以下脚本：

var cssStr = 'a{text-decoration: none}';
let styleTag = document.createElement('style');
styleTag.innerHTML = cssStr;
document.firstChild.appendChild(styleTag);

这基本上会创建<style></style> 并将其附加到html。如果您有特定的<style> 标签，请选择它而不是创建新标签。

Answer 3

var element = document.getElementById("myDIV");
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { text-decoration: none; }';
document.getElementsByTagName('head')[0].appendChild(style);

element.className = 'cssClass';

Answer 4

这就是CSSStyleSheet.insertRule 的用途：

let styleSheet = document.styleSheets[0];
styleSheet.insertRule('.demo { background: red; color: white; }');

<div class="demo">test</div>