是否有可能导入css样式表到一个html页面使用Javascript?如果是，该怎么做呢?
p.s. javascript将托管在我的网站上，但我希望用户能够把他们的网站的<头>标签，它应该能够导入一个css文件托管在我的服务器到当前的网页。(CSS文件和javascript文件都将托管在我的服务器上)。
当前回答
如果你使用jquery:
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
其他回答
如果你使用jquery:
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
我知道这是一个相当老的帖子，但这里是我的5美分。
根据您的需要，还有另一种方法可以做到这一点。
我有一个情况下，我想要一个css文件是活跃的，只有一段时间。比如css切换。激活css，然后在另一个事件后取消激活它。
而不是动态加载css然后删除它，你可以在新css的所有元素前添加一个Class/ id，然后只需切换css的基本节点的Class/ id(如body标签)。
你会用这个解决方案有更多的css文件最初加载，但你有一个更动态的方式切换css布局。
下面是一个单行示例，使用纯JavaScript根据URL的文件名部分将CSS链接注入到head元素中:
document.head.innerHTML += '<link rel=“stylesheet” href=“css/style.css”>';
大多数浏览器都支持它。查看浏览器兼容性。
这个函数使用记忆。并且可以多次调用，而不会出现两次加载和运行相同样式表的冲突。而且，它不会在样式表实际加载之前解析。
const loadStyle = function () {
let cache = {};
return function (src) {
return cache[src] || (cache[src] = new Promise((resolve, reject) => {
let s = document.createElement('link');
s.rel = 'stylesheet';
s.href = src;
s.onload = resolve;
s.onerror = reject;
document.head.append(s);
}));
}
}();
请注意函数表达式后面的括号()。
样式表的并行加载:
Promise.all([
loadStyle('/style1.css'),
loadStyle('/style2.css'),
// ...
]).then(() => {
// do something
})
您可以对动态加载脚本使用相同的方法。
元素。insertAdjacentHTML有很好的浏览器支持，可以在一行中添加一个样式表。
document.getElementsByTagName("head")[0].insertAdjacentHTML(
"beforeend",
"<link rel=\"stylesheet\" href=\"path/to/style.css\" />");
