Best way to add css to page with javascript?

Question

In my javascript app, I dynamically add css to a page, using something like this

document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="/components/bubble_list/simple/sm_bubble_list.css">';

I'm not sure if this is me, but I find that it seems to temporarily disable all existing css when processing the css from that file. If this is the normal behaviour, is there a better way to add css dynamically, so that the flow is more natural, like it only processes the css from that file?

Thanks

This is the correct approach: https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets — Scott Marcus, Jun 12 '17 at 13:29
Possible duplicate of [How do you add CSS with Javascript?](https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript) — daan.desmedt, Jun 12 '17 at 13:32

score 0 · Answer 1 · answered Jun 12 '17 at 13:31

Try this

var link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
link.setAttribute('href', '/components/bubble_list/simple/sm_bubble_list.css');
document.getElementsByTagName('head')[0].appendChild(link)

score 0 · Answer 2 · answered Jun 12 '17 at 13:31

If css file:

var link = document.createElement('link')
link.setAttribute('rel', 'stylesheet')
link.setAttribute('type', 'text/css')
link.setAttribute('href', 'css/my.css')
document.getElementsByTagName('head')[0].appendChild(link)

If css text:

var style = document.createElement('style')
style.type = 'text/css'
style.innerHTML = 'content'
document.getElementsByTagName('head')[0].appendChild(style)

score 0 · Answer 3 · answered Jun 12 '17 at 13:41

If you want to link CSS File

change css/style.css to your path to your css link

// var css link
var csslink = document.createElement('link')
// set attribute to css link file
csslink.setAttribute('rel', 'stylesheet')
csslink.setAttribute('type', 'text/css')
csslink.setAttribute('href', 'css/style.css') // change css/style.css to the path of your css link
document.getElementsByTagName('head')[0].appendChild(link)

Best way to add css to page with javascript?

3 Answers3