1.创建一个三行三列的表格(边框粗细为1px,表格内容随意填写),一个按钮,当点击按钮时表格的背景颜色变成绿色。2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px。
时间: 2024-03-18 17:39:25 浏览: 41
点击按钮设置表格背景色
4星 · 用户满意度95%
好的,下面是代码实现:
1. 创建一个三行三列的表格,一个按钮,点击按钮时表格背景颜色变绿色
```html
<!-- HTML代码 -->
<table border="1" cellspacing="0" cellpadding="10">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<button onclick="changeBgColor()">点击变绿色</button>
<script>
function changeBgColor() {
var table = document.querySelector("table");
table.style.backgroundColor = "green";
}
</script>
```
2. 创建一个盒子,鼠标移入时宽高变为250px,移出时宽高变回100px
```html
<!-- HTML代码 -->
<div class="box"></div>
<!-- CSS代码 -->
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.box:hover {
width: 250px;
height: 250px;
}
</style>
```
这个盒子的宽高会在鼠标移入时变为250px,移出时变回100px,而盒子的背景颜色随意填写。
阅读全文