动态加载CSS文件有以下几种方法
- 创建一个
link元素，设置rel属性为stylesheet，href属性为CSS文件路径，然后将该link元素添加到文档的<head>元素中。
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/your/css/file.css';
document.head.appendChild(link);
- 使用XMLHttpRequest（XHR）对象获取CSS文件内容，然后使用JavaScript动态创建一个
style元素，将CSS文件内容设置为该style元素的文本内容，最后将该style元素添加到文档的<head>元素中。
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
const style = document.createElement('style');
style.textContent = xhr.responseText;
document.head.appendChild(style);
}
};
xhr.open('GET', 'path/to/your/css/file.css');
xhr.send();
- 使用
fetch函数获取CSS文件内容，然后使用JavaScript动态创建一个style元素，将CSS文件内容设置为该style元素的文本内容，最后将该style元素添加到文档的<head>元素中。
fetch('path/to/your/css/file.css')
.then(response => response.text())
.then(cssText => {
const style = document.createElement('style');
style.textContent = cssText;
document.head.appendChild(style);
});
