Javascript 使用其他按钮更改按钮样式

有没有一种方法可以通过单击另一个按钮来更改CSS按钮的样式和/或文本？让我给你一个简单的例子：

假设页面顶部有一系列按钮，要求您选择一个类别。单击三个按钮中的一个

页面上的其他按钮应根据单击的类别按钮进行更改。例如，如果您单击类别A按钮，则按钮2可能为绿色，并显示“单击以获取某物”，而如果您选择类别B，则按钮2可能为红色，并显示“不要单击此”。（它不会被禁用，只是被标记。我想阻止点击，而不是禁止它。）此外，如果有人想在不选择类别的情况下点击按钮，则这些按钮需要有一个默认值

多谢各位

编辑

我为没有包含代码而道歉，但我不确定是否可以这样做。在第一批回答者的指导下，我做了一次尝试，但仍然没有成功

<style>
table, th, td {border-collapse: collapse; border: 2px solid; color: #FFFFFF}
th {background-color: black;}

.top {width:110px; height: 25px; background-color: #FFFF00; color: #000000;}
.off {width:110px; height: 25px; background-color: #DDDDDD; color: #000000;}

</style>


<table>
<tr>
    <th colspan=4>Click on favorite sport:</th></tr>
<tr>
    <td><button class="top" onclick=document.getElementById("bb").style.background-color: #009900; color = #FFFFF;>BASEBALL</button></td>
    <td><button class="top" onclick=document.getElementById("fb").style.background-color: #0000DD; color = #FFFFFF;>FOOTBALL</button></td>
    <td><button class="top" onclick=document.getElementById("bk").style.background-color: #EE4500; color = #FFFFFF;>BASKETBALL</button></td>
    <td><button class="top" onclick=document.getElementById("bk").style.background-color: #89CFF0; color = #FFFFFF;>HOCKEY</button></td>
</tr>
<tr>
<th colspan=4>Click on favorite team:</th></tr>
<tr>
    <td><button class="off" id="bb">YANKEES</button></td>
    <td><button class="off" id="fb">COWBOYS</button></td>
    <td><button class="off" id="bk">CELTICS</button></td>
    <td><button class="off" id="bk">CANADIENS</button></td>
</tr>
<tr>
    <td><button class="off" id="bb">CUBS</button></td>
    <td><button class="off" id="fb">PACKERS</button></td>
    <td><button class="off" id="bk">LAKERS</button></td>
    <td><button class="off" id="bk">PENGUINS</button></td>
</tr>
</table>

表，th，td{边框折叠：折叠；边框：2px实心；颜色：#FFFFFF}
th{背景色：黑色；}
.top{宽度：110px；高度：25px；背景色：#FFFF00；颜色：#000000；}
.off{宽度：110px；高度：25px；背景色：#DDDDDD；颜色：#000000；}
点击喜爱的运动：
棒球运动
足球运动
篮球运动
曲棍球
单击喜爱的团队：
北方佬
牛仔
凯尔特人
加拿大人
幼崽
包装工
湖人队
企鹅

我正在努力，但在我这个年龄学习新的编码是乏味的

以下是应该发生的事情：

---

您可以使用JavaScript函数更改CSS按钮的类别

---

例如，为正在显示的按钮创建多个类。设置HTML中每个按钮的默认类。通过

onClick

事件，您可以调用一个JavaScript函数，该函数可以更改HTML中任何项的类，从而允许您更改它在所有CSS样式中的显示方式。

在HTML中，使用onClick事件来运行JavaScript函数。在javascript中，使用document.getElementById（“elementIdHere”）.style.backgroundColor=“red”；更改背景色。

及 document.getElementById（“elementIdHere”）.innerHTML=“此处的文本”； 更改文本。

---

有一些方法可以做到这一点， 您可以在css页面中创建一个类，然后使用以下命令将该类添加到按钮：

document.getElementById("change").setAttribute("class","button");

其中“change”是要更改样式的按钮id。看见

也可以使用以下命令更改样式：

document.getElementById("change").style.color = "red";

编辑：根据您的更改： 1） 记住为每个元素

id

属性定义特定值。如果要更改多个元素样式，可以按元素的

class

属性使用它。 2） 在java脚本代码中，必须将

背景色

拼写为

背景色

。 3） 最好在java脚本中定义函数，而不是定义为元素属性

您的HTML代码：

<table>
<tr>
    <th colspan=4>Click on favorite sport:</th></tr>
<tr>
    <td><button class="top" id="1" onclick="ChangeColor(this.id);">BASEBALL</button></td>
    <td><button class="top" id="2" onclick="ChangeColor(this.id);">FOOTBALL</button></td>
    <td><button class="top" id="3" onclick="ChangeColor(this.id);">BASKETBALL</button></td>
    <td><button class="top" id="4" onclick="ChangeColor(this.id);">HOCKEY</button></td> 
</tr>
<tr>
<th colspan=4>Click on favorite team:</th></tr>
<tr>
    <td><button class="off" id="a">YANKEES</button></td>
    <td><button class="off" id="b">COWBOYS</button></td>
    <td><button class="off" id="c">CELTICS</button></td>
    <td><button class="b off" id="d">CANADIENS</button></td>
</tr>
<tr>
    <td><button class="b off" id="e">CUBS</button></td>
    <td><button class="off" id="f">PACKERS</button></td>
    <td><button class="b off" id="g">LAKERS</button></td>
    <td><button class="off" id="h">PENGUINS</button></td>
</tr>
</table>

还有你的JS：

 function ChangeColor(flag){
  switch (flag) {
    case "1" : document.getElementById("a").style.color = "red";
               document.getElementById("a").style.backgroundColor  = "pink";
               breake;
    case "2" : $('.b').css('color', 'red');
               $('.b').css('background-color', 'pink');
               breake;
  }
}

---

请检查：

是的，但您需要将您的请求缩小到一个单一的、明确的目标，并向我们表明您已经进行了某种尝试，并让我们知道您需要帮助的具体内容。我将原始问题编辑为更具体的问题。谢谢。首先，你必须给出你的元素，不同的“id”值。我已经更新了我的答案，请你检查一下它和里面的链接好吗？@MichaelRudolf，你检查过解决方案了吗？谢谢你的尝试，但它并不能满足我的要求。我想这是办不到的。我会摆弄一会儿，但我太沮丧了，我可能会放弃。再次感谢你的努力。我把我原来的问题编辑得更具体一些。非常感谢。

 function ChangeColor(flag){
  switch (flag) {
    case "1" : document.getElementById("a").style.color = "red";
               document.getElementById("a").style.backgroundColor  = "pink";
               breake;
    case "2" : $('.b').css('color', 'red');
               $('.b').css('background-color', 'pink');
               breake;
  }
}