在javascript中呈现HTML时包含外部CSS

Question

我正在创建一个工具，当放置一个简单的javascript行时，它会在网站上显示横幅。这样的东西足以在任何页面上显示横幅。

<script type="text/javascript" src="http://mysite.com/mytool/"></script>

基本上它的代码是这样的

var div = document.createElement('div')
document.write('<div>all content goes here</div>');

由于它是一个300行应用程序，因此涉及很多CSS。

在通过javascript进行内联HTML渲染时，有没有办法嵌入外部CSS文件？

我没有使用jQuery或任何其他库，因为我试图尽可能地减小输出大小。

Answer 1

您可以打印链接标记，正如@Pointy所指出的那样：

document.write('<link href=stylesheet href=foo/style.css>');

但更好的方法是把它放在头上：

document.head.innerHTML += '<link href=stylesheet href=foo/style.css>';

Answer 2

head = document.getElementsByTagName('head')[0],
style = document.createElement('link');
style.type = 'text/css';
style.href = "pathtocss.css"
style.rel = "stylesheet"
head.appendChild(style);