在javascript中使用CSS [重复]答案

【问题标题】：Using CSS within javascript [duplicate]在javascript中使用CSS [重复]
【发布时间】：2017-10-05 05:02:16
【问题描述】：

我正在尝试从 javascript 加载 css。我有一个小图标，我需要用户通过我的脚本标签在他们的网站上显示的样式，例如<script src="mywebiste.com/api.js"></script

而不是像这样做内联样式：

document.body.innerHTML +=
'<div style="position:absolute;width:10%;height:10%;opacity:0.3;
             z-index:100;background:#000;">
</div>';

如何从 javascript 加载 css 样式？像 intercom.com 这样的小部件是如何做到的？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

假设你已经在body里面有div，你可以使用jQuery css()

$("body > div").css({
  "position": "absolute",
   "width": "10%",
   "height": "10%",
   "opacity" : "0.3",
   "z-index":"100",
   "background":"#000"
});

【讨论】：

【解决方案2】：

<script type="text/javascript">
var link = document.createElement("link");
link.href = "path-to-your-css-file";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName("head")[0].appendChild(link);
</script>

用var link = document.createElement("link");在javascript中创建<link>元素

然后添加必要的html属性。

最后将其附加到<head> 部分：

document.getElementsByTagName("head")[0].appendChild(link);

【讨论】：