如何用js加载css样式表

在JavaScript中加载CSS样式表可以通过多种方式实现，以下是几种常见的方法：

方法一：使用`<link>`元素动态创建

你可以动态地创建一个<link>元素，并将其添加到文档的<head>部分来加载CSS文件。

function loadCSS(url) {
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    document.getElementsByTagName("head")[0].appendChild(link);
}

// 使用方法
loadCSS('path/to/your/stylesheet.css');

方法二：使用`@import`规则

你可以在一个已经存在的CSS文件中使用@import规则来导入另一个CSS文件。

/* 在你的主样式表中 */
@import url('path/to/your/stylesheet.css');

方法三：使用JavaScript的`fetch` API

你可以使用fetch API获取CSS内容，然后创建一个<style>元素并插入到文档中。

function loadCSS(url) {
    fetch(url)
        .then(response => response.text())
        .then(css => {
            const style = document.createElement('style');
            style.type = 'text/css';
            if (style.styleSheet) {
                style.styleSheet.cssText = css;
            } else {
                style.appendChild(document.createTextNode(css));
            }
            document.head.appendChild(style);
        })
        .catch(error => console.error('Error loading CSS:', error));
}

// 使用方法
loadCSS('path/to/your/stylesheet.css');

方法四：使用`<style>`元素直接插入CSS代码

如果你已经有CSS代码作为字符串，可以直接创建一个<style>元素并插入到文档中。

function loadCSS(cssCode) {
    const style = document.createElement('style');
    style.type = 'text/css';
    if (style.styleSheet) {
        style.styleSheet.cssText = cssCode;
    } else {
        style.appendChild(document.createTextNode(cssCode));
    }
    document.head.appendChild(style);
}

// 使用方法
const cssCode = 'body { background-color: red; }';
loadCSS(cssCode);