揭秘JS动态添加CSS的神奇技巧，轻松实现页面样式个性化调整！

在Web开发中，JavaScript（JS）和CSS是两个紧密相连的伙伴。CSS负责页面的样式设计，而JS则可以动态地修改这些样式，从而实现页面的个性化调整。本文将揭秘JS动态添加CSS的神奇技巧，帮助开发者轻松实现页面样式的个性化调整。

一、动态添加CSS的方法

1. 使用`<style>`标签

最简单的方法是在HTML文档中直接添加<style>标签，并通过JavaScript修改其内容。这种方法适用于简单的样式修改。

<style id="dynamic-style"> /* CSS样式 */ </style>

// 动态修改样式 const style = document.getElementById('dynamic-style'); style.innerHTML = ` body { background-color: red; } `;

2. 使用`<link>`标签

另一种方法是使用<link>标签引入外部CSS文件，并通过JavaScript修改其内容。

<link rel="stylesheet" href="style.css" id="dynamic-link">

// 动态修改样式 const link = document.getElementById('dynamic-link'); link.href = 'new-style.css'; // 新的CSS文件路径

3. 使用JavaScript库

一些JavaScript库，如jQuery、Bootstrap等，提供了更丰富的样式操作功能。例如，使用jQuery动态修改CSS：

// 使用jQuery动态修改样式 $('#dynamic-style').css('background-color', 'red');

二、实现页面样式个性化调整的技巧

1. 根据用户偏好动态调整

通过JavaScript获取用户偏好，如颜色、字体等，然后动态地修改页面样式。

// 获取用户偏好 const userPreferences = { color: 'blue', fontSize: '16px' }; // 动态修改样式 document.body.style.backgroundColor = userPreferences.color; document.body.style.fontSize = userPreferences.fontSize;

2. 使用CSS变量

CSS变量（Custom Properties）允许在全局范围内定义变量，并在样式中重复使用。使用JavaScript动态修改CSS变量，可以轻松实现页面样式的个性化调整。

:root { --main-color: red; } body { background-color: var(--main-color); }

// 动态修改CSS变量 document.documentElement.style.setProperty('--main-color', 'blue');

3. 使用CSS-in-JS库

CSS-in-JS库，如styled-components、emotion等，可以将CSS样式与JavaScript代码紧密结合，实现更灵活的样式操作。

import styled from 'styled-components'; const StyledDiv = styled.div` background-color: ${props => props.color}; `; // 使用组件 <StyledDiv color="blue" />