2017-06-12 88 views
0

在我的JavaScript應用程序,我動態添加CSS來一個網頁,使用這樣的事情用javascript添加css到頁面的最佳方法是什麼?

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

我不知道這是否是我,但我發現它似乎暫時禁用所有現有的CSS處理時該文件的CSS。如果這是正常的行爲,是否有更好的方式來動態添加css,以便流程更自然,就像它只處理來自該文件的css?

感謝

+0

這是正確的做法:https://developer.mozilla.org/en-US/docs/Web/API/Document/styleSheets –

+6

[你如何用Javascript添加CSS?](https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript) –

+0

這裏所有的方法有什麼不同? – omega

回答

0

試試這個

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

如果css文件:

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) 

如果CSS文本:

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

如果您想鏈接CSS文件

變化CSS/style.css中你的路徑你的CSS鏈接

// 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) 
相關問題