用js设置两个按钮点击不同按钮切换文本的颜色
时间: 2023-08-31 16:13:33 浏览: 76
可以使用以下代码实现:
HTML代码:
```
<button id="btn1" onclick="changeText('btn1')">按钮1</button>
<button id="btn2" onclick="changeText('btn2')">按钮2</button>
<p id="text">这是一段文本</p>
```
JS代码:
```
function changeText(btnId) {
var clickedBtn = document.getElementById(btnId);
var otherBtn;
if (btnId === 'btn1') {
otherBtn = document.getElementById('btn2');
} else {
otherBtn = document.getElementById('btn1');
}
var text = document.getElementById('text');
if (clickedBtn.style.color !== 'red') {
clickedBtn.style.color = 'red';
otherBtn.style.color = '';
text.style.color = 'red';
} else {
clickedBtn.style.color = '';
text.style.color = '';
}
}
```
当点击按钮1时,按钮1和文本的颜色会变成红色,按钮2的颜色变成默认颜色;当点击按钮2时,按钮2和文本的颜色会变成红色,按钮1的颜色变成默认颜色。如果再次点击已经变成红色的按钮,则按钮和文本的颜色会变回默认颜色。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)