【前端】JS动态加载样式方法总结-编程实验室

在JavaScript中动态加载样式有多种方法，以下是几种常用的方式：

1. 创建并插入`<style>`元素

内联样式文本

// 方法1：直接设置 innerHTMLfunctionaddStyle(cssText){conststyle=document.createElement('style');style.type='text/css';style.innerHTML=cssText;document.head.appendChild(style);returnstyle;}// 使用addStyle(`body { background-color: #f0f0f0; } .highlight { color: red; }`);// 方法2：使用 insertRule（更高效，支持批量操作）functionaddStyleWithRules(rules){conststyle=document.createElement('style');document.head.appendChild(style);constsheet=style.sheet;rules.forEach(rule=>{sheet.insertRule(rule,sheet.cssRules.length);});}// 使用addStyleWithRules(['body { background: #fff; }','.dynamic { font-size: 16px; }']);

2. 动态加载外部CSS文件

// 创建 link 元素加载外部CSSfunctionloadExternalCSS(url){returnnewPromise((resolve,reject)=>{constlink=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href=url;link.onload=()=>resolve(link);link.onerror=()=>reject(newError(`Failed to load CSS:${url}`));document.head.appendChild(link);});}// 使用loadExternalCSS('styles.css').then(()=>console.log('CSS加载成功')).catch(err=>console.error('CSS加载失败:',err));// 或者使用 async/awaitasyncfunctionloadStyles(){try{awaitloadExternalCSS('theme.css');awaitloadExternalCSS('components.css');console.log('所有样式加载完成');}catch(error){console.error('加载样式失败:',error);}}

3. 动态修改现有样式

// 获取或创建样式表functiongetStyleSheet(){// 尝试获取现有的动态样式表letstyle=document.getElementById('dynamic-styles');if(!style){style=document.createElement('style');style.id='dynamic-styles';document.head.appendChild(style);}returnstyle.sheet||style.styleSheet;}// 添加/更新样式规则functionupdateCSSRule(selector,styles){constsheet=getStyleSheet();constcssText=Object.entries(styles).map(([prop,value])=>`${prop}:${value}`).join('; ');construle=`${selector}{${cssText}}`;// 删除已存在的相同选择器规则for(leti=0;i<sheet.cssRules.length;i++){if(sheet.cssRules[i].selectorText===selector){sheet.deleteRule(i);break;}}// 添加新规则sheet.insertRule(rule,sheet.cssRules.length);}

4. 使用`document.adoptedStyleSheets`(现代浏览器)

// 创建可复用的样式表functioncreateAdoptedStyleSheet(cssText){constsheet=newCSSStyleSheet();sheet.replaceSync(cssText);returnsheet;}// 将样式表应用到文档或Shadow DOMfunctionapplyStyleSheet(sheet){// 应用到整个文档document.adoptedStyleSheets=[...document.adoptedStyleSheets,sheet];// 或者应用到Shadow DOM// shadowRoot.adoptedStyleSheets = [sheet];}// 使用示例constmyStyles=createAdoptedStyleSheet(`:root { --primary-color: #3498db; } .custom-element { color: var(--primary-color); }`);applyStyleSheet(myStyles);

5. 完整示例：带缓存和事件处理的CSS加载器

classCSSLoader{constructor(){this.loaded=newSet();this.pending=newMap();}// 加载CSS（支持缓存和去重）load(url,options={}){const{id=url,cache=true,force=false}=options;// 如果已经加载且不强制重新加载if(this.loaded.has(id)&&!force&&cache){returnPromise.resolve();}// 如果正在加载中if(this.pending.has(id)){returnthis.pending.get(id);}constpromise=newPromise((resolve,reject)=>{constlink=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href=url;if(id!==url)link.id=id;link.onload=()=>{this.loaded.add(id);this.pending.delete(id);resolve(link);};link.onerror=(error)=>{this.pending.delete(id);reject(error);};document.head.appendChild(link);});this.pending.set(id,promise);returnpromise;}// 加载多个CSS文件loadAll(urls,options={}){returnPromise.all(urls.map(url=>this.load(url,options)));}// 检查是否已加载isLoaded(id){returnthis.loaded.has(id);}// 移除已加载的CSSremove(id){constelement=document.getElementById(id);if(element){element.parentNode.removeChild(element);this.loaded.delete(id);}}}// 使用示例constcssLoader=newCSSLoader();// 加载单个CSScssLoader.load('https://cdn.example.com/style.css',{id:'theme'}).then(()=>console.log('主题样式已加载'));// 加载多个CSScssLoader.loadAll(['components.css','layout.css','typography.css']).then(()=>console.log('所有基础样式已加载'));

6. 性能优化建议

// 1. 使用 requestIdleCallback 或 setTimeout 延迟加载非关键CSSfunctionloadNonCriticalCSS(){if('requestIdleCallback'inwindow){requestIdleCallback(()=>{loadExternalCSS('non-critical.css');});}else{setTimeout(()=>{loadExternalCSS('non-critical.css');},3000);}}// 2. 预加载CSSfunctionpreloadCSS(url){constlink=document.createElement('link');link.rel='preload';link.as='style';link.href=url;link.onload=()=>{link.rel='stylesheet';};document.head.appendChild(link);}// 3. 媒体查询动态加载functionloadCSSByMedia(query,url){constlink=document.createElement('link');link.rel='stylesheet';link.media=query;link.href=url;document.head.appendChild(link);// 当媒体查询匹配时立即应用link.onload=()=>{link.media='all';};}

注意事项

样式优先级：动态加载的样式遵循CSS层叠规则
性能影响：避免频繁修改样式，使用CSS类切换
浏览器兼容性：
- insertRule和deleteRule在IE中使用addRule和removeRule
- adoptedStyleSheets需要Chrome 73+ / Firefox 101+
内容安全策略(CSP)：确保动态样式符合CSP规则

选择哪种方法取决于具体需求：