gpt4 book ai didi

javascript - 使用 javascript 在 css 网格布局中突出显示元素

转载 作者:行者123 更新时间:2023-12-04 13:07:32 26 4
gpt4 key购买 nike

我得到了一个包含 25 个 div 元素的 css 网格。单击时,每个元素都应在突出显示和正常显示之间切换。

由于每个元素都可以单独打开和关闭,我为每个元素制作了一个box_state变量并将其设置为false作为初始值,这样它就可以设置为true 一旦打开。

为了突出显示每个元素,我得到了这段代码:

    document.querySelector("#n_1").onclick = function() {
if (box_1_state === false) {
document.querySelector("#n_1").style.filter = "brightness(150%)";
box_1_state = true;
} else {
document.querySelector("#n_1").style.filter = "brightness(100%)";
box_1_state = false;
}

}

n_1是html文件中div的名称,box_1_state是上面提到的变量。

因此,为了完成这项工作,我必须使代码块超过 25 次,这似乎可以更容易地完成。有什么建议吗?

最佳答案

const ELS_box = document.querySelectorAll(".box");
ELS_box.forEach(EL => EL.addEventListener("click", function() {
this.classList.toggle("is-active");
}))
.boxes {
display: grid;
grid-template-columns: repeat(5, 30px);
grid-template-rows: repeat(5, 30px);
grid-auto-flow: column;
}

.box {
margin: 5px;
background: red;
}

.box.is-active {
filter: brightness(50%);
}
<div class="boxes">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

关于javascript - 使用 javascript 在 css 网格布局中突出显示元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68695975/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com