Question

我使用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>

Answer 1

您基本上需要找到已添加颜色的所有元素。 document.querySelectorAll允许您执行任何有效的CSS查询并获取与该选择匹配的元素。拥有这些元素后，您可以循环遍历它们并删除样式属性。唯一的问题是如何找到元素。只需对代码进行最少的更改，您就可以使用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>

Answer 2

一种方法是将容器中所有子容器的背景设置回原始颜色。这个和@AnilRedShift解决方案之间唯一真正的区别是明确只设置背景颜色而不是完全删除样式。

＆＃13;

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";
        });
    }
}

＆＃13;

: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;
}

＆＃13;

<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>

＆＃13;

如何撤消对元素样式的更改？

2 个答案: