如何从 CSS 或 HTML 文件中的变量附加 CSS？角度 4+

Question

是否可以CSS从变量追加。例如

var myHtml = "<div>My example html</div>";

// in html i can do this

<div [innerHTML]="myHtml"></div> 

但是如果我CSS存储在变量中怎么办？如下所示：-

var myCss = ".exampleClass {margin: 0;width: 100%;}";

如何将此 css 变量添加到我的CSS文件中或HTML作为工作 css？

我正在使用 Angular 4+，但即使是 JavaScript 解决方案也很受欢迎。

Answer 1

您只需使用 JavaScript 将新<style>标签插入页面即可：

var myCss = ".exampleClass {margin: 0;width: 100%;color:blue}";

var style = document.createElement("STYLE");
style.innerText = myCss;
document.body.appendChild(style);

<div class="exampleClass">Lorem ipsum</div>