使用 JavaScript 更改 CSS 示例

JavaScript 都是关于动态的东西，处理动态 CSS 更改只是 JavaScript 正是我们需要的场景之一。

使用 JavaScript，我们可以为 DOM 中的一个或多个元素设置 CSS 样式，修改它们，删除它们，甚至更改所有页面的整个样式表。

让我们来看看我们可以做到这一点的不同方法：

1. 用 Ja​​vaScript 改变 CSS 内联属性

直接从 JavaScript 设置单个样式是处理动态 CSS 样式时最常见的场景之一。

这种方式允许您更改 DOM 中存在的一个或多个元素的 CSS 样式。

你所要做的就是：

1. 查询 DOM 中存在的元素。
2. 并为它一一设置样式。

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样式表

假设现在您不想将内联样式添加到元素或对其应用类。相反，您希望在样式表级别应用更改。为什么？

有几个原因：

1. 您可能希望将更改应用于具有特定选择器的所有元素。但不仅适用于 HTML 上现在存在的元素，还适用于以后将动态添加的所有未来元素。

2. 可能有大量元素共享您要对其应用更改的选择器。想象一下 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 样式表

在某些情况下，我们可能只想附加一个全新的样式表，甚至替换现有的样式表。

其原因可能是：

1. 您有一个支持多个主题并允许用户动态更改它们的 Web 应用程序。

2. 您可能希望将组件打包在单个 JS 文件中，而不必同时包含 JS 和 CSS 两个文件。

它的工作方式非常简单：

1. 1- 我们使用模板文字为我们的新样式表编写内容。
2. 2- 我们选择head页面元素来附加我们的新样式表。
3. 3-我们使用创建样式表元素document.createElement("style")
4. 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. 用 Ja​​vaScript 覆盖 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)

参考：

• MDN 网络文档

相关文章：

• 如何使用 JavaScript 警报
• 如何在 JavaScript 中更改选定的选项
• 如何防止在可滚动元素上滚动