答案：通过JavaScript操作DOM可动态添加或移除样式表。1. 添加外部样式：创建link元素并插入head；2. 添加内联样式：创建style元素并设置textContent；3. 移除样式表：通过引用或选择器删除对应元素；4. 注意去重、使用disabled临时禁用及标识便于调试。
在网页运行时动态添加或移除样式表，可以通过操作 DOM 来实现。CSS 本身不能直接“动态”添加或删除样式表，但结合 JavaScript 可以轻松控制 <link> 或 <style> 元素，从而实现动态加载和卸载样式。
动态添加样式表
你可以通过创建 <link> 标签来加载外部 CSS 文件，或者创建 <style> 标签来插入内联样式。
使用 JavaScript 创建一个 <link> 元素，并将其插入到页面的 <head> 中：
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'path/to/your/style.css';
document.head.appendChild(link);
如果你只想临时添加一些样式规则，可以直接创建 <style> 元素：
立即学习“前端免费学习笔记（深入）”；
const style = document.createElement('style');
style.textContent = `
.highlight { background-color: yellow; }
body { font-family: sans-serif; }
`;
document.head.appendChild(style);
动态移除样式表
要移除已添加的样式表，只需获取对应的元素并从 DOM 中删除。
● 移除 link 样式表
如果你之前保存了 link 元素的引用，可以直接移除：
if (link.parentNode) {
link.parentNode.removeChild(link);
}
也可以根据 href 或其他属性查找并移除：
const linkToRemove = document.querySelector('link[href="path/to/your/style.css"]');
if (linkToRemove) {
linkToRemove.remove();
}
对于动态创建的 <style> 标签，可以加上标识（如 id 或 class）以便后续移除：
style.id = 'dynamic-style';
const styleElement = document.getElementById('dynamic-style');
if (styleElement) {
styleElement.remove();
}
实用技巧与注意事项
动态管理样式表时，注意以下几点：
- 确保重复添加同一份样式表时做去重处理，避免性能浪费
- 使用
disabled属性可临时关闭样式表（仅适用于<link>）：link.disabled = true; - 移除样式表后，页面中已应用的样式不会立即消失，除非被后续样式覆盖
- 建议为动态样式添加注释或标识，便于调试
基本上就这些。通过操作 DOM 中的 <link> 和 <style> 元素，你可以灵活地在运行时控制样式的加载与卸载。不复杂但容易忽略细节。
