JavaScript 都是关于动态的东西，处理动态 CSS 更改只是 JavaScript 正是我们需要的场景之一。
使用 JavaScript，我们可以为 DOM 中的一个或多个元素设置 CSS 样式，修改它们，删除它们，甚至更改所有页面的整个样式表。
让我们来看看我们可以做到这一点的不同方法：
1. 用 JavaScript 改变 CSS 内联属性
直接从 JavaScript 设置单个样式是处理动态 CSS 样式时最常见的场景之一。
这种方式允许您更改 DOM 中存在的一个或多个元素的 CSS 样式。
你所要做的就是：
- 查询 DOM 中存在的元素。
- 并为它一一设置样式。
const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';请注意，使用该
style属性设置 CSS 样式时，您必须以驼峰形式编写 CSS 属性。而不是使用破折号-来分隔单词，您必须将每个单词的首字母大写。(backgroundColor,fontSize)
如果您像这样执行此代码，您会注意到更改发生在页面加载时。
如果要动态更改 CSS 样式，则必须将这部分代码附加到某个事件。
例如，如果您想在单击按钮时更改元素的样式，那么您必须首先监听click事件并附加一个包含先前代码的函数。
这是一个例子：
const button = document.querySelector('button');
button.addEventListener('click', () => {
const element = document.querySelector('.demo');
element.style.backgroundColor = 'red';
});请注意，当您使用 JavaScript 应用特定样式时，这些样式优先于样式表上外部应用的样式，甚至优于 HTML 元素本身内联应用的样式。
.demo{
color: red;
}<!-- Element with inline styles declared in the HTML -->
<div class="demo" style="color: blue;">Demo</div>例如，在这种情况下，我们有一个带有内联样式的元素，为它提供了黄色背景。
如果我们现在将 CSScolor属性设置为green使用 JavaScript，那么我们的元素将获得green颜色。它将覆盖内联样式和应用于外部 CSS 样式表的样式。
2.同时设置多个CSS样式
想象一下，您必须为单个元素应用 5 或 10 种样式。
您可以一一进行，并具有以下内容：
element.style.display = 'block';
element.style.width = '100px';
element.style.backgroundColor = 'red';
element.style.border = '2px';
element.style.fontSize = '12px';
element.style.color = 'white';
element.style.margin = '20px';
element.style.paddingLeft = '10px';
element.style.paddingBottom = '10px';
element.style.lineHeight = '13px';但也许您正在寻找一种“更智能”的方式来同时更改它们，而无需太多代码重复。
如果是这样的话，那么我有一个好消息要告诉你！
您实际上可以将string值传递给cssText属性以一次设置多个 CSS 样式。
更好的是，我们可以使用模板文字类型的字符串来将它们分开在不同的行中，就像您在样式表中所做的那样。
// Defining all our CSS styles
const myStyles = `
display: block;
width: 80%;
background-color: red;
border: 2px;
font-size: 5em;
color: white;
margin: 20px;
padding-left: 10px;
padding-bottom: 10px;
border: 2px solid black;
`;
const element = document.querySelector('.demo');
element.style.cssText = myStyles;如果您正在学习 JavaScript，您可能需要查看我们的列表，其中包含学习 JavaScript 的最佳书籍或学习 JavaScript的最佳方法是什么。
2. 更改 JavaScript 中的 CSS 类
<div class="demo">Hello</div>// Adding a CSS class name to an element
const element = document.querySelector('.demo');
element.classList.add('new-class');.new-class{
background: red;
}同样，您也可以通过使用删除某些类，classList.remove甚至在使用时切换它们classList.toggle。
这是一个例子：
// Removing an existing class from an element
const element = document.querySelector('.demo');
element.classList.removeClass('.new-class');// Toggling a class from an element
const element = document.querySelector('.demo');
element.classList.toggleClass('.new-class');3.动态改变CSS样式表
假设现在您不想将内联样式添加到元素或对其应用类。相反，您希望在样式表级别应用更改。为什么？
有几个原因：
- 您可能希望将更改应用于具有特定选择器的所有元素。但不仅适用于 HTML 上现在存在的元素，还适用于以后将动态添加的所有未来元素。
- 可能有大量元素共享您要对其应用更改的选择器。想象一下 500 个元素共享您的选择器，甚至 1K、5K、10K。必须使用 JavaScript 选择所有这些元素，然后遍历它们以更改它们的样式（或添加一个类）将非常缓慢。
在这里直接修改 CSS 样式表会派上用场。
您可以使用 选择文档的样式表document.styleSheets。如果您知道要修改的样式表是第二个，则可以使用document.styleSheets[2].
然后，您将遍历其所有规则并获取您需要修改的规则。在这种情况下，如果要修改.element类，可以将每个规则的选择器与.element.
这是代码：
// Getting the stylesheet
const stylesheet = document.styleSheets[2];
let elementRules;
// looping through all its rules and getting your rule
for(let i = 0; i < stylesheet.cssRules.length; i++) {
if(stylesheet.cssRules[i].selectorText === '.element') {
elementRules = stylesheet.cssRules[i];
}
}
// modifying the rule in the stylesheet
elementRules.style.setProperty('background', 'blue');这是您可以使用的 Codepen 示例：
4. 动态添加和删除 CSS 样式表
在某些情况下，我们可能只想附加一个全新的样式表，甚至替换现有的样式表。
其原因可能是：
- 您有一个支持多个主题并允许用户动态更改它们的 Web 应用程序。
- 您可能希望将组件打包在单个 JS 文件中，而不必同时包含 JS 和 CSS 两个文件。
它的工作方式非常简单：
- 1- 我们使用模板文字为我们的新样式表编写内容。
- 2- 我们选择
head页面元素来附加我们的新样式表。 - 3-我们使用创建样式表元素
document.createElement("style") - 4- 我们使用
document.createTextNodeand将样式表内容附加到新样式元素appendChild。
这是代码：
const button = document.querySelector("button");
// The content of the stylesheet
const styleSheetContent = `
.demo{
background:red;
}
`;
// Attaching the change to a click event in a button
button.addEventListener("click", () => {
appendStyleSheet("demo", styleSheetContent);
});
// Appends CSS content to the head of the site
function appendStyleSheet(id, content) {
if (!document.querySelector("#" + id)) {
var head = document.head || document.getElementsByTagName("head")[0];
console.log(head);
head.appendChild(createStyleElement(id, content));
}
}
// Creates the style element
function createStyleElement(id, content) {
var style = document.createElement("style");
style.type = "text/css";
style.id = id;
if (style.styleSheet) {
style.styleSheet.cssText = content;
} else {
style.appendChild(document.createTextNode(content));
}
return style;
}这是 Codepen 示例，因此您可以自行测试并根据需要修改一些内容：
5. 用 JavaScript 覆盖 CSS!important样式
我们都知道规则：“避免使用！important”。但是，嘿！有时它真的很有必要，或者它只是我们无法控制的。
priority 属性确保此类样式将!important覆盖任何内联声明的样式（编写在 HTML 元素本身中）以及任何先前声明的适用于您的元素的规则。
那么......如果我们需要覆盖之前使用声明的样式!important怎么办？
想象一下我们有我们的元素：
<div class="demo">Demo</div>样式表使用如下!important规则：
.demo{
background-color: yellow !important;
}您所要做的就是在JavaScript 提供给我们priority的函数上应用参数：setProperty
el.style.setProperty(property, value, priority);这是一个例子：
var el = document.querySelector('.demo');
el.style.setProperty('background-color', 'red', 'important');请注意，在使用时，
setProperty我们指定 CSS 属性的方式与在样式表中的方式完全相同。使用破折号-分隔单词。(background-color,font-size)
