ts怎么用按钮改变card背景色
时间: 2023-09-13 17:03:24 浏览: 55
你可以在按钮的点击事件中通过修改 card 的 style 属性来改变其背景色。具体实现方法如下:
1. 在 HTML 中添加一个按钮和一个 card 元素,给它们分别设置 id 标识符。
```html
<button id="changeColorBtn">改变背景色</button>
<div class="card" id="card">这是一个卡片</div>
```
2. 在 CSS 中设置 card 的初始样式。
```css
.card {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
```
3. 在 JavaScript 中获取按钮和 card 元素,并给按钮添加点击事件。
```javascript
const changeColorBtn = document.getElementById('changeColorBtn');
const card = document.getElementById('card');
changeColorBtn.addEventListener('click', function() {
card.style.backgroundColor = '#f0f0f0';
});
```
4. 当点击按钮时,会触发点击事件,将 card 的背景色改为 #f0f0f0。
完整代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>按钮改变 card 背景色</title>
<style>
.card {
background-color: #ffffff;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<button id="changeColorBtn">改变背景色</button>
<div class="card" id="card">这是一个卡片</div>
<script>
const changeColorBtn = document.getElementById('changeColorBtn');
const card = document.getElementById('card');
changeColorBtn.addEventListener('click', function() {
card.style.backgroundColor = '#f0f0f0';
});
</script>
</body>
</html>
```
相关推荐
![](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)