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

Question

I'm creating a tool that display a banner on a website when a simple javascript line is placed. Something like this is enough to show the banner on any page.

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

Basically its code is something like this

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

Since its a 300 line app there is a lot of CSS involved.

Is there any way to embed an external CSS file when doing this inline HTML rendering via javascript?

I'm not using jQuery or any other library since I'm trying to reduce the output size as possible as I can.

Answer 1

You can print the link tag, as @Pointy pointed out:

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

But better is to place it in the head:

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