Question

在我的javascript应用中，我使用类似这样的内容动态地将css添加到页面

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

我不确定这是不是我，但我发现在处理该文件的css时似乎会暂时禁用所有现有的css。如果这是正常行为，是否有更好的方法动态添加css，以便流程更自然，就像它只处理该文件中的css一样？

由于

Answer 1

试试这个

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)

Answer 2

如果是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)

Answer 3

如果您要关联 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)

使用javascript将页面添加到页面的最佳方式是什么？

3 个答案: