英文:
js not getting border
问题
我是一名新手。我想将页面颜色更改为白色，但更改后，我希望我的 .symbol 类的边框颜色更改为黑色，但我的某个符号无法正常工作，尽管我看不到任何问题。可能是什么问题？
这是我的代码：
function handleStyleColorChange() {
if (event.target.matches('.white-btn')) {
document.body.style.color = "#141516"
document.querySelector(".symbol").style.borderColor = "#141516";
} else {
document.body.style.color = "#ced4e2"
document.querySelector(".symbol").style.borderColor = "#ced4e2";
}
}
我尝试添加了 document.querySelector(".symbol").style.borderColor = "#ced4e2";，但不起作用
英文:
I am a newbie. I would like to change the color of my page to white but when changed, I want my .symbol class border to change to black but one of my symbols is not working although I don't see any problem. What could be the problem?
Here is my code below:
https://codepen.io/mizginyildirak/pen/zYmoYme
function handleStyleColorChange() {
if (event.target.matches('.white-btn')) {
document.body.style.color = "#141516"
document.querySelector(".symbol").style.borderColor = "#141516";
} else {
document.body.style.color = "#ced4e2"
document.querySelector(".symbol").style.borderColor = "#ced4e2";
}
}
I tried to add document.querySelector(".symbol").style.borderColor = "#ced4e2";
but didn't work
答案1
得分: 2
这是发生的原因，因为您有多个具有相同类的元素，所以我们需要循环遍历它并逐个更改样式，您可以尝试这样做：
function changeStyle(color) {
document.querySelectorAll(".symbol").forEach((item) => {
item.style.borderColor = color;
});
}
function handleStyleColorChange() {
if (event.target.matches('.white-btn')) {
document.body.style.color = "#141516"
changeStyle("#141516");
} else {
document.body.style.color = "#ced4e2"
changeStyle("#ced4e2");
}
}
英文:
That's happening because you have multiple elements have the same class so we need to loop through it and change the style one by one, you can try to do this:
function changeStyle(color) {
document.querySelectorAll(".symbol").forEach((item) => {
item.style.borderColor = color;
});
}
function handleStyleColorChange() {
if (event.target.matches('.white-btn')) {
document.body.style.color = "#141516"
changeStyle("#141516");
} else {
document.body.style.color = "#ced4e2"
changeStyle("#ced4e2");
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论