html实现点击按钮点击之后切换按钮颜色及按钮内的文字内容。
时间: 2024-09-25 12:10:11 浏览: 21
在HTML中,你可以通过JavaScript来实现这个功能。首先,创建两个按钮,并给它们分别设置初始的颜色和文本。然后,给这两个按钮添加点击事件处理程序,当按钮被点击时,会改变另一个按钮的颜色和文本。
这是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<style>
.button {
width: 100px;
height: 50px;
border: none;
cursor: pointer;
color: white;
font-size: 16px;
}
.button-red { background-color: red; }
.button-blue { background-color: blue; }
</style>
</head>
<body>
<button id="btnRed" class="button button-red">点击我变蓝</button>
<button id="btnBlue" class="button button-blue">我是蓝色按钮</button>
<script>
function switchColorAndText() {
var btnRed = document.getElementById('btnRed');
var btnBlue = document.getElementById('btnBlue');
if (btnRed.style.backgroundColor === 'red') {
btnRed.style.backgroundColor = 'blue';
btnRed.textContent = '我现在是蓝色';
btnBlue.style.backgroundColor = 'red';
btnBlue.textContent = '点击我变蓝';
} else {
btnRed.style.backgroundColor = 'red';
btnRed.textContent = '点击我变蓝';
btnBlue.style.backgroundColor = 'blue';
btnBlue.textContent = '我是蓝色按钮';
}
}
// 给每个按钮添加点击事件监听器
document.getElementById('btnRed').addEventListener('click', switchColorAndText);
document.getElementById('btnBlue').addEventListener('click', switchColorAndText);
</script>
</body>
</html>
```
在这个例子中,当你点击红色按钮时,它的背景色会变为蓝色,文本变为“我现在是蓝色”,同时蓝色按钮的背景色变为红色,文本变为“点击我变蓝”。反之亦然。