英文:
Changing the Background color of a single element?
问题
我目前正在制作学校的时间表。我有大约50个相同类别但具有不同id的按钮，是否可以使用JavaScript函数更改特定id的按钮的颜色？
以下是两个示例按钮：
<button type="button" class="btn" onclick="openPopup1()" id="output1"><strong>+</strong></button>
<button type="button" class="btn" onclick="openPopup2()" id="output2"><strong>+</strong></button>
我不知道如何做，研究后也没有找到任何信息，所以希望你能帮助我 
英文:
I am currently working on a timetable for school. I have about 50 buttons of the same class but with different id´s. is it possible to change the color of a specific Button with a specific id with a function in js?
<button type="button" class="btn" onclick="openPopup1()" id="output1"><strong>+</strong></button>
<button type="button" class="btn" onclick="openPopup2()" id="output2"><strong>+</strong></button>
These are two of the Buttons as an Example
i had no ideas how to do it and found nothing after research so i hope you can help me
答案1
得分: 2
document.getElementById("output1").style.backgroundColor="red"有什么问题？实质上是在按钮上设置内联样式。
英文:
What's wrong with document.getElementById("output1").style.backgroundColor="red"? Essentially sets an inline style on the button.
答案2
得分: 1
这可能有点过于复杂，可能不是你所需要的。但是，如果你将 this 传递给你的 onclick 函数，你可以在函数中引用该按钮。
在我的示例中，我给被点击的按钮添加了一个 active 类，并从任何其他已点击的按钮中移除了 active 类。
function deactiveBtns(){
let activeBTNs = document.querySelectorAll(".btn.active");
activeBTNs.forEach((btn) => {
btn.classList.remove("active");
});
}
function openPopup1(el){
deactiveBtns();
el.classList.toggle("active");
}
function openPopup2(el){
deactiveBtns();
el.classList.toggle("active");
}
.btn.active{
background:red;
}
<button type="button" class="btn" onclick="openPopup1(this)" id="output1"><strong>+</strong></button>
<button type="button" class="btn" onclick="openPopup2(this)" id="output2"><strong>+</strong></button>
英文:
This might be overkill and not what you are looking for. But if you pass this to your onclick function, you can reference that button in the function.
In my example, I add a class of active to whatever button was clicked and remove active from any other clicked buttons.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function deactiveBtns(){
let activeBTNs = document.querySelectorAll(".btn.active");
activeBTNs.forEach((btn) => {
btn.classList.remove("active");
});
}
function openPopup1(el){
deactiveBtns();
el.classList.toggle("active");
}
function openPopup2(el){
deactiveBtns();
el.classList.toggle("active");
}
<!-- language: lang-css -->
.btn.active{
background:red;
}
<!-- language: lang-html -->
<button type="button" class="btn" onclick="openPopup1(this)" id="output1"><strong>+</strong></button> <button type="button" class="btn" onclick="openPopup2(this)" id="output2"><strong>+</strong></button>
<!-- end snippet -->
答案3
得分: 0
你可以使用JS通过访问元素的ID并适当设置style属性来更改按钮的背景颜色。
document.getElementById("headerStore").setAttribute("style", "background-color: red;");
你可以在页面加载时执行这个操作，或者通过按钮点击触发它。你还可以使用CSS引用特定的ID来实现这个目的。
希望这对你有帮助！
英文:
You can change the background color of a button with JS by accessing the element by Id and setting the style attribute appropriately.
document.getElementById("headerStore").setAttribute("style", "background-color: red;");
You can do it when the page is loaded, or trigger it with the click of a button. You can also reference specific items by ID with CSS as well.
Hopefully this helps!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论