css如何修改样式:点击按钮修改对应样式,再次点击恢复
时间: 2024-09-11 21:02:29 浏览: 48
在CSS中,通常我们不会直接控制点击事件来改变样式,因为CSS本身是静态的,它主要用于描述文档元素的布局和外观。但如果你想要实现这个功能,可以结合JavaScript和HTML来完成。以下是一个简单的示例:
首先,在HTML中创建一个按钮和需要切换样式的元素,比如一个段落:
```html
<button id="toggleButton">切换样式</button>
<p id="targetText" style="color: red;">点击我改变颜色</p>
```
然后,使用JavaScript来监听按钮的点击事件,并切换目标元素的样式:
```javascript
document.getElementById('toggleButton').addEventListener('click', function() {
var target = document.getElementById('targetText');
if (target.style.color === 'red') { // 如果当前颜色是红色
target.style.color = 'blue'; // 改为蓝色
this.textContent = '恢复原始样式';
} else {
target.style.color = 'red'; // 恢复到红色
this.textContent = '切换样式';
}
});
```
在这个例子中,当点击按钮时,如果文字的颜色是红色,则变为蓝色;反之则变回红色,同时按钮的文字会相应地改变。
阅读全文