JS如何动态插入一段CSS，要求CSS需要携带资源url-Go服务器开发

在JavaScript中动态插入带有资源URL的CSS，可以通过以下几种方式实现：

方法1：创建style元素并插入CSS规则

// 创建style元素
const style = document.createElement('style');
style.type = 'text/css';

// CSS内容，包含资源URL
const cssText = `
.background-image {
    background-image: url('/images/background.jpg');
}

.icon {
    background-image: url('https://example.com/icons/icon.png');
}

.custom-element::before {
    content: '';
    background: url('/assets/sprite.svg') no-repeat;
}
`;

// 插入CSS
if (style.styleSheet) {
    // IE支持
    style.styleSheet.cssText = cssText;
} else {
    style.appendChild(document.createTextNode(cssText));
}

// 添加到head
document.head.appendChild(style);

方法2：使用CSSStyleSheet API（现代浏览器）

// 创建样式表
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.theme-background {
    background: url('/themes/default/bg.png') center/cover;
}

.dynamic-content {
    background-image: url('${dynamicImageUrl}');
}
`);

// 应用到文档
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

方法3：动态创建link元素引入外部CSS

function loadExternalCSS(cssUrl) {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = cssUrl;
    
    // 可选：添加加载成功/失败的回调
    link.onload = () => console.log('CSS加载成功');
    link.onerror = () => console.error('CSS加载失败');
    
    document.head.appendChild(link);
}

// 使用示例
loadExternalCSS('/styles/dynamic-styles.css');

方法4：使用模板字符串动态构建CSS

function createDynamicCSS(resourceMap) {
    const style = document.createElement('style');
    
    const cssContent = `
        /* 动态生成的CSS */
        .hero-section {
            background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), 
                       url('${resourceMap.heroImage}');
        }
        
        .user-avatar {
            background-image: url('${resourceMap.avatarUrl}');
        }
        
        @font-face {
            font-family: 'CustomFont';
            src: url('${resourceMap.fontUrl}') format('woff2');
        }
        
        .custom-bg {
            --bg-url: url('${resourceMap.background}');
            background-image: var(--bg-url);
        }
    `;
    
    style.textContent = cssContent;
    document.head.appendChild(style);
}

// 使用示例
const resources = {
    heroImage: '/images/hero-banner.jpg',
    avatarUrl: 'https://api.example.com/users/123/avatar',
    fontUrl: '/fonts/custom-font.woff2',
    background: '/assets/texture.png'
};

createDynamicCSS(resources);

方法5：模块化的动态样式管理

class DynamicStyleManager {
    constructor() {
        this.stylesheet = null;
        this.init();
    }
    
    init() {
        this.stylesheet = document.createElement('style');
        document.head.appendChild(this.stylesheet);
    }
    
    addRule(selector, styles) {
        const rule = `${selector} { ${styles} }`;
        
        if (this.stylesheet.sheet) {
            this.stylesheet.sheet.insertRule(rule, this.stylesheet.sheet.cssRules.length);
        } else if (this.stylesheet.styleSheet) {
            // IE兼容性
            this.stylesheet.styleSheet.cssText += rule;
        }
    }
    
    addBackgroundImage(className, imageUrl, options = {}) {
        const { size = 'cover', position = 'center', repeat = 'no-repeat' } = options;
        
        const styles = `
            background-image: url('${imageUrl}');
            background-size: ${size};
            background-position: ${position};
            background-repeat: ${repeat};
        `;
        
        this.addRule(`.${className}`, styles);
        
        // 添加加载状态类
        this.addRule(`.${className}.loading`, `
            background-image: none;
            background-color: #f0f0f0;
        `);
        
        // 添加错误状态类  
        this.addRule(`.${className}.error`, `
            background-image: none;
            background-color: #ffebee;
        `);
        
        return className; // 返回类名以便使用
}
}

// 使用示例
const styleManager new DynamicStyleManager();

// 添加带URL的背景样式  
const bgClass styleManager.addBackgroundImage(
'dynamic-bg',
'https://example.com/images/background.jpg',
{ size:'contain', position:'top left'}
);

// 应用到元素  
document.getElementById('myElement').classList.add(bgClass);