如何撤消对元素样式的更改？
如何撤消对元素样式的更改？
提问于 2018-06-02 08:51:45
我使用Javascript创建了一个具有动态行数和列数的网格。此外，我使用javascript来突出显示我悬停在其上的框。但是，当我创建一个具有不同行数和列数的新网格时，突出显示框的样式更改仍然存在。如何撤消这些更改？也就是说，我如何才能从清晰的网格开始？
let btn = document.getElementById("start")
btn.addEventListener("click", createGrid)
function createGrid() {
let numberOfRows = prompt("How many rows would you like?");
let i = 0;
let x = numberOfRows**2;
document.documentElement.style.setProperty("--columns-row", numberOfRows);
for (i; i < x ; i++) {
var div = document.createElement("div");
document.getElementById("container").appendChild(div);
div.addEventListener("mouseenter", function () {
this.style.backgroundColor = "red";
});
}
}:root {
--columns-row: 2;
}
#container {
display: grid;
grid-template-columns: repeat(var(--columns-row), 1fr);
grid-template-rows: repeat(var(--columns-row), 1fr);
width: 500px;
height: 500px;
}
div {
width: 100%;
height: 100%;
outline: 1px solid;
float: left;
background-color: white;
}<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-sketch</title>
</head>
<body>
<h1>Etch-a-sketch</h1>
<button id="start">Start</button>
<div id="container"></div>
</body>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-02 09:06:02
实际上，您需要找到已添加颜色的所有元素。document.querySelectorAll允许您执行任何有效的CSS查询并获取与该选择相匹配的元素。一旦有了这些元素，就可以循环遍历它们并删除style属性。唯一的问题是如何找到元素。只需对代码进行最小程度的更改，就可以使用div[style*="background-color: red"]选择器来匹配exact style。正如链接的帖子所解释的那样，这是脆弱的，所以你可以考虑在你的网格中添加一个类名，然后使用querySelectorAll('.myClassname')。
document.getElementById('btn').addEventListener('click', () => {
const reds = document.querySelectorAll('div[style*="background-color: red"]');
reds.forEach(red => red.removeAttribute('style'));
});div {
width: 30px;
height: 30px;
}<div style="background-color: red"></div>
<div style="background-color: red"></div>
<div style="background-color: red"></div>
<div style="background-color: red"></div>
<button id="btn">remove red</button>
Stack Overflow用户
发布于 2018-06-02 09:10:04
一种方法是将容器的所有子对象的背景设置回原始颜色。这与@AnilRedShift的解决方案之间唯一的真正区别是显式地只设置背景颜色，而不是完全删除样式。
let btn = document.getElementById("start")
btn.addEventListener("click", createGrid)
function resetGrid() {
if (typeof shamelesslyStealFromAnilRedshift !== "undefined") {
var reds = document.querySelectorAll('div[style*="background-color: red"]');
reds.forEach(red => red.style.backgroundColor = null);
} else {
Array.from(document.getElementById("container").children).forEach(
kid => kid.style.backgroundColor = null
);
}
}
function createGrid() {
let numberOfRows = prompt("How many rows would you like?");
let i = 0;
let x = numberOfRows**2;
resetGrid();
document.documentElement.style.setProperty("--columns-row", numberOfRows);
for (i; i < x ; i++) {
var div = document.createElement("div");
document.getElementById("container").appendChild(div);
div.addEventListener("mouseenter", function () {
this.style.backgroundColor = "red";
});
}
}:root {
--columns-row: 2;
}
#container {
display: grid;
grid-template-columns: repeat(var(--columns-row), 1fr);
grid-template-rows: repeat(var(--columns-row), 1fr);
width: 500px;
height: 500px;
}
div {
width: 100%;
height: 100%;
outline: 1px solid;
float: left;
background-color: white;
}<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Etch-a-sketch</title>
</head>
<body>
<h1>Etch-a-sketch</h1>
<button id="start">Start</button>
<div id="container"></div>
</body>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50652578
复制相关文章
相似问题
腾讯云开发者
