Include external CSS when rendering HTML inside javascript

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.

Just document.write() the <link> tag.

Pointy
– Pointy

2012-07-21 21:04:54 +00:00
Commented Jul 21, 2012 at 21:04 — Pointy
– Pointy, Commented Jul 21, 2012 at 21:04

Wouter J · Accepted Answer · 2012-07-21 21:47:07Z

4

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

edited Jul 21, 2012 at 21:47

answered Jul 21, 2012 at 21:08

Wouter J

42k15 gold badges113 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rab Khan Over a year ago

scr does not work , it has to be href and docment.write is incorrect in the context

Wouter J Over a year ago

@RabNawaz thank you. I have edited it, can you just remove the -1? Thank you!

Rab Khan · Accepted Answer · 2012-07-21 21:30:26Z

3

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

edited Jul 21, 2012 at 21:30

answered Jul 21, 2012 at 21:08

Rab Khan

35.7k4 gold badges52 silver badges66 bronze badges

2 Comments

Wouter J Over a year ago

the style element doesn't have a src attribute: w3.org/TR/html5/the-style-element.html#the-style-element

Wouter J Over a year ago

a link element doesn't have a src attribute too... @RabNawaz w3.org/TR/html5/the-link-element.html#the-link-element

Collectives™ on Stack Overflow

Include external CSS when rendering HTML inside javascript

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related