应用了 CSS 类，但从 vanilla JS 函数调用时不显示样式答案

【问题标题】：CSS class applied but style not showing when called from vanilla JS function应用了 CSS 类，但从 vanilla JS 函数调用时不显示样式
【发布时间】：2020-06-05 07:00:26
【问题描述】：

我正在尝试向我的 JS 脚本中的元素添加一个 css 类，以通过函数更改其样式，但无法弄清楚为什么它不起作用。

在下面的示例中，我创建的容器获得了正确的类 .container 和适当的样式。然后调用 pink() 的函数确实添加了正确的类，但相应的样式

background-color: "pink";

从控制台调用时不应用。

有人看到我错过了什么吗？请注意我想先学习普通的 JS。

https://repl.it/join/mtnjkrmj-etiennebrgnl

【问题讨论】：

你实际上在哪里调用pink()函数？
如果您发布了您的 css、html 和 js，将对所有人都有帮助。您提供的链接需要用户名和密码。
background-color: pink 不只是被其他样式否决了吗？
控制台调用pink()函数
@GetSet 好点，很抱歉假设它对所有人开放。下次我会写完整的代码:)

标签： javascript html css class

【解决方案1】：

首先，您需要实际调用pink() 函数才能发挥它的魔力:)

其次，您的 CSS 文件中有分号，导致container 下面的类无法被读取。

这是您的代码的固定版本：

const container = document.querySelector("#container");
container.classList.add("container");


function createCell() {
    const cell = document.createElement("div");
    container.appendChild(cell);
    cell.classList.add("cell");
    return cell.classList;
};

function pink(){
    container.classList.add("pink");
    return container;
};

pink();

.container {
    display: grid;
    width: 500px;
    height: 500px;
    border-style: solid;
    border-width: 1px;
    background-color: grey;
}

.cell {
    background-color: cyan;
}

.pink {
    background-color: pink;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>rclass-test</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id="container" class="container"></div>
    
    <script src="script.js"></script>
  </body>
</html>

【讨论】：

感谢@GalAbra！所以你说我在css中的分号是问题... faceplam