Question

有没有办法根据点击另一个按钮更改CSS按钮的样式和/或文本？让我举个简单的例子：

在页面顶部说有一系列按钮要求您选择一个类别。您单击三个按钮之一。

页面上的其他按钮应根据单击的类别按钮而改变。例如，如果您单击类别A按钮，则按钮2可能为绿色并说“单击某事”，而如果您选择了类别B，则它将为红色并说“请勿单击此”。（它不会被禁用，只是标记。我想阻止点击，而不是禁止它。）此外，按钮需要有默认值，以防有人想要点击它们而不选择类别。

谢谢。

修改

我为不包含代码而道歉，但我甚至不确定如果可以完成。在第一批回答者的指导下，我做了一个尝试，但它仍然无效。

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

我我尝试，但在我这个年纪学习新编码是乏味的。

以下是应该发生的概念：

Sample image

Answer 1

在HTML中使用onclick事件来运行javascript函数。在javascript中使用document.getElementById（“elementIdHere”）。style.backgroundColor =“red”;改变背景颜色。 See Reference

和 document.getElementById（“elementIdHere”）。innerHTML =“你的文字在这里”; 改变文字。 See Reference

Answer 2

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

实施例。为要显示的按钮创建多个类。设置HTML中每个按钮的默认类。使用onClick事件，您可以调用JavaScript函数，该函数可以更改HTML中任何项目的类，允许您通过所有CSS样式更改其显示方式。

Answer 3

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

model = sklearn.linear_model.LogisticRegression()
model.fit(train_data["carat","cut","color"], train_data["price"])

其中“更改”是您要更改样式的按钮ID。看到 jsfiddle.net

或者您可以使用以下方式更改样式：

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

修改：根据您的更改： 1）记住为每个元素document.getElementById("change").style.color = "red";属性定义特定值。如果要更改多个元素样式，可以按元素的id属性使用它。 2）你必须在{1}}的java脚本代码中拼写class。 3）最好在java脚本中定义函数，而不是定义为元素属性。

您的HTML代码：

background-color

你的CSS：

backgroundColor

你的JS：

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

你能检查一下：jsfiddle.net

用另一个按钮改变按钮样式

3 个答案: