应用CSS类，但当从vanilla JS函数调用时样式没有显示。
应用CSS类，但当从vanilla JS函数调用时样式没有显示。
提问于 2020-06-05 07:00:26
我试图在我的JS脚本中的一个元素中添加一个css类，以便通过一个函数来改变它的样式，但是我不知道为什么它不能工作。
在下面的示例中，我创建的容器获得正确的类.container和适当的样式。然后，名为粉红色()的函数确实添加了正确的类，但添加了相应的样式
background-color: "pink";从控制台调用时不应用。
有人看到我错过了什么吗？请注意，我想学习首先与普通香草JS。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-05 07:11:08
首先，您需要调用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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62209824
复制相关文章
相似问题
腾讯云开发者
