JavaScript可以通过DOM操作动态引用CSS，具体方法包括：使用document.createElement('link')创建外部样式表链接，设置rel="stylesheet"和href属性后插入到head中；或创建style标签，将CSS文本内容写入后插入文档，这种方式适用于按需加载样式、根据条件切换主题或动态生成样式场景，需注意，动态加载的CSS会遵循浏览器同源策略，且插入后样式会立即生效，影响页面渲染，通过这种方式，JS实现了对CSS的灵活引用和控制。
JavaScript 能引用 CSS 吗？探索 JS 与 CSS 的交互方式
在 Web 开发中，HTML、CSS 和 JavaScript 各司其职：HTML 负责结构，CSS 负责样式，JavaScript 负责交互，但三者并非完全独立——JavaScript（以下简称 JS）作为"动态脚本语言"，完全有能力"引用"或"操作" CSS，实现样式与逻辑的联动，JS 具体能通过哪些方式引用 CSS？这些方式又适用于哪些场景？本文将为你详细拆解。
核心答案：JS 不仅能引用 CSS，还能动态修改、创建和管理样式
JS 与 CSS 的交互本质是通过 DOM（文档对象模型）操作 CSS 样式，无论是修改已有元素的样式、动态添加样式规则，还是通过 JS 控制样式加载，JS 都能实现对 CSS 的"引用"和管理，下面我们从具体实现方式展开。
JS 引用 CSS 的 6 种常见方式
直接修改元素的内联样式（style 属性）
最基础的方式是通过 JS 访问 DOM 元素的 style 属性，直接修改元素的内联样式，这种方式针对性强，适合快速修改单个元素的样式。
原理：
每个 DOM 元素都有一个 style 对象，对应其 HTML 中的 style 属性，通过 元素.style.样式属性 = '值' 即可动态修改样式，需要注意的是，CSS 属性名需要转换为驼峰式命名（如 background-color → backgroundColor）。
示例代码：
// 获取 id 为 "box" 的元素
const box = document.getElementById('box');
// 修改背景色
box.style.backgroundColor = 'lightblue';
// 修改字体大小
box.style.fontSize = '20px';
// 添加过渡效果（需符合 CSS 属性命名规范，如驼峰式）
box.style.transition = 'all 0.3s ease';
// 修改多个样式
box.style.cssText = `
background-color: lightblue;
font-size: 20px;
padding: 10px;
border-radius: 5px;
`;
优缺点：
- 优点：直接、简单，无需依赖外部 CSS 文件，适合快速调试或动态调整单个元素样式。
- 缺点：样式与结构耦合，内联样式优先级高（会覆盖外部 CSS），难以复用；无法批量修改样式。
动态创建或修改 <style> 标签（全局样式规则）
如果需要批量修改多个元素的样式,或动态添加一套新的 CSS 规则，可以通过 JS 创建 <style> 标签并插入到 <head> 中。
原理：
<style> 标签用于定义文档的内部样式表，JS 可以动态创建 <style> 节点，设置其 textContent 为 CSS 规则字符串，然后通过 document.head.appendChild() 添加到文档头部。
示例代码：
// 创建 style 标签
const style = document.createElement('style');
style.textContent = `
.highlight {
background-color: yellow;
color: #333;
font-weight: bold;
animation: pulse 1s infinite;
}
.dark-mode {
background-color: #222;
color: #fff;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
`;
// 插入到 head 中
document.head.appendChild(style);
// 为元素添加类名（触发样式）
const paragraph = document.querySelector('p');
paragraph.classList.add('highlight');
优缺点：
- 优点：可批量定义样式，适合主题切换、动态主题等场景；样式规则作用于全局，复用性强。
- 缺点：直接操作 CSS 规则，若规则冲突需手动处理优先级；动态修改可能影响样式表的可读性。
操作元素的 class 或 id（推荐：样式与逻辑分离）
更符合前端工程实践的方式是：JS 只负责控制元素的类名（class）或 ID，而具体的样式规则由 CSS 文件定义，这种方式实现了"逻辑（JS）与样式（CSS）的分离"，便于维护。
原理：
通过 JS 的 classList API（如 add、remove、toggle、contains）或直接操作 className，动态为元素添加/移除 CSS 类名，从而触发预定义的样式规则。
示例代码：
/* CSS 文件中预定义样式 */
.active {
border: 2px solid #007bff;
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 123, 255, 0.3);
}
.hidden {
display: none;
}
.fade-in {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
// 获取元素
const button = document.querySelector('button');
const box = document.querySelector('.box');
// 点击按钮时切换类名
button.addEventListener('click', () => {
box.classList.toggle('active');
button.textContent = box.classList.contains('active') ? '取消激活' : '激活';
// 添加过渡效果
box.classList.add('fade-in');
setTimeout(() => box.classList.remove('fade-in'), 500);
});
// 鼠标悬停时隐藏按钮
button.addEventListener('mouseenter', () => {
button.classList.add('hidden');
});
button.addEventListener('mouseleave', () => {
button.classList.remove('hidden');
});
优缺点：
- 优点：样式与逻辑完全分离，符合"关注点分离"原则；样式规则可复用，便于维护；通过 CSS 预处理器（如 Sass、Less）能进一步优化样式管理。
- 缺点：需要提前在 CSS 中定义样式规则，无法动态生成全新的样式（除非结合
<style>标签）。
动态加载外部 CSS 文件（按需加载）
对于大型应用,有时需要根据用户操作（如切换主题、加载模块）动态引入外部 CSS 文件，JS 可以通过创建 <link> 标签并设置 href 属性实现。
原理：
<link> 标签用于引入外部资源（如 CSS 文件），JS 动态创建 <link> 节点，设置 rel="stylesheet" 和 href 属性，然后插入到 <head> 中。
示例代码：
// 动态加载 dark-theme.css
function loadDarkTheme() {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'dark-theme.css';
link.id = 'dark-theme';
// 避免重复加载
if (!document.getElementById('dark-theme')) {
document.head.appendChild(link);
// 监听加载完成事件
link.onload = () => {
console.log('深色主题加载完成');
};
link.onerror = () => {
console.error('深色主题加载失败');
};
}
}
// 动态卸载 dark-theme.css
function unloadDarkTheme() {
const darkTheme = document.getElementById('dark-theme');
if (darkTheme) {
darkTheme.remove();
}
}
// 调用示例
loadDarkTheme(); // 加载深色主题
setTimeout(unloadDarkTheme, 5000); // 5秒后卸载
优缺点：
- 优点：按需加载，减少初始页面加载时间；适合模块化开发（如按需加载组件样式）。
- 缺点：动态加载的 CSS 文件需要处理加载完成的事件（如
onload），避免样式错乱；需注意网络请求对性能的影响。
使用 CSS 变量（自定义属性）实现动态样式
现代 CSS 引入了自定义属性（CSS Variables），JS 可以通过操作这些变量实现更灵活的样式控制。
标签： #JS CSS
