1点击按钮,div的形状从正方形变成圆形,同时按钮内的文字从“圆形”变成“正方形" 2再次点击按钮,diy的形状从圆形变成正方形,同时按钮内的文字从“正方形”变成“圆形”。 提示:事件驱动程序中需要使用条件语句判断按钮的内容(innerHTML)。如果按钮的内容为“圆形”,执行1; 否则,执行2。
时间: 2024-03-03 21:53:30 浏览: 17
好的,这是一个前端开发的问题,需要使用JavaScript来实现。你可以在按钮的点击事件中使用条件语句判断按钮的内容,然后根据不同情况执行不同的操作。以下是一个实现的示例代码:
HTML代码:
```
<button id="btn">圆形</button>
<div id="shape" class="square"></div>
```
CSS代码:
```
.square {
width: 100px;
height: 100px;
background-color: blue;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}
```
JavaScript代码:
```
var btn = document.getElementById("btn");
var shape = document.getElementById("shape");
btn.onclick = function() {
if (btn.innerHTML === "圆形") {
btn.innerHTML = "正方形";
shape.classList.remove("square");
shape.classList.add("circle");
} else {
btn.innerHTML = "圆形";
shape.classList.remove("circle");
shape.classList.add("square");
}
}
```
在上面的代码中,我们首先获取了按钮和形状的DOM元素,然后给按钮添加了一个点击事件。在点击事件中,我们使用了条件语句判断按钮的内容,如果是“圆形”,则将按钮的文本改为“正方形”,同时将形状的样式从“square”改为“circle”;否则,将按钮的文本改为“圆形”,同时将形状的样式从“circle”改为“square”。这样,每次点击按钮,就可以实现形状和按钮文本的切换了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)