使用 JavaScript 更改 CSS 示例

缺乏、安全感 2023-09-28 07:31 3阅读 0赞

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

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

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

### 1. 用 JavaScript 改变 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;
    }

<div class="demo" style="color: blue;">Demo</div>

例如，在这种情况下，我们有一个带有内联样式的元素，为它提供了黄色背景。

如果我们现在将 CSS`color`属性设置为`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 样式。

更好的是，我们可以使用[模板文字][Link 1]类型的字符串来将它们分开在不同的行中，就像您在样式表中所做的那样。

// 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 的[最佳书籍][Link 2]或学习 JavaScript[的最佳方法是什么][Link 3]。

### 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.createTextNode`and将样式表内容附加到新样式元素`appendChild`。

这是代码：

这是 Codepen 示例，因此您可以自行测试并根据需要修改一些内容：

### 5. 用 JavaScript 覆盖 CSS`!important`样式 ###

我们都知道规则：*“避免使用！important”*。但是，嘿！有时它真的很有必要，或者它只是我们无法控制的。

priority 属性确保此类样式将`!important`覆盖任何内联声明的样式（编写在 HTML 元素本身中）以及任何先前声明的适用于您的元素的规则。

那么......如果我们需要覆盖之前使用声明的样式`!important`怎么办？

想象一下我们有我们的元素：

样式表使用如下`!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 网络文档][MDN]

### 相关文章： ###

*  [如何使用 JavaScript 警报][JavaScript]
 *  [如何在 JavaScript 中更改选定的选项][JavaScript 1]
 *  [如何防止在可滚动元素上滚动][Link 4]

[Link 1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
[Link 2]: https://alvarotrigo.com/blog/javascript-books/
[Link 3]: https://alvarotrigo.com/blog/best-way-learn-javascript/
[MDN]: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty
[JavaScript]: https://alvarotrigo.com/blog/javascript-alert/
[JavaScript 1]: https://alvarotrigo.com/blog/javascript-select-option/
[Link 4]: https://alvarotrigo.com/blog/prevent-scroll-on-scrollable-element-js/