javascript - 在 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);