javascript - 如何从 CSS 或 HTML 文件中的变量附加 CSS？ Angular 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

您可以简单地插入一个新的 <style>使用 JavaScript 标记到您的页面:

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>