Js 通过点击改变css样式
时间: 2023-08-16 22:04:40 浏览: 243
js改变css样式
可以使用 JavaScript 中的 `addEventListener` 方法来监听某个元素的点击事件,然后在事件处理程序中修改该元素的 CSS 样式。
比如,如果想要通过点击按钮来改变某个元素的背景颜色,可以先在 HTML 中定义一个按钮和一个需要改变样式的元素:
```html
<button id="change-bg-color-btn">点击修改背景颜色</button>
<div id="target" style="background-color: yellow; width: 200px; height: 200px;"></div>
```
然后在 JavaScript 中获取这个按钮和目标元素,并为按钮添加点击事件监听器:
```javascript
const changeBgColorBtn = document.querySelector('#change-bg-color-btn');
const target = document.querySelector('#target');
changeBgColorBtn.addEventListener('click', () => {
target.style.backgroundColor = 'red';
});
```
这样,当点击按钮时,目标元素的背景颜色就会从黄色变成红色。
阅读全文