设置一个200px宽高的div背景颜色为red点击变成blue 点击后能够不停切换 提示:if
时间: 2023-05-23 09:02:20 浏览: 177
您可以使用以下 HTML 和 CSS 代码来实现这个效果:
```
<div id="myDiv"></div>
<style>
#myDiv {
width: 200px;
height: 200px;
background-color: red;
}
#myDiv.clicked {
background-color: blue;
}
</style>
<script>
const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", function() {
myDiv.classList.toggle("clicked");
});
</script>
```
这将创建一个 200px x 200px 的红色 div 元素,并添加一个点击事件监听器。每次单击时,JavaScript 将在 div 元素中切换一个名为 "clicked" 的 CSS 类,该类包含一个将 div 的背景颜色设置为蓝色的规则。
相关问题
设置一个200px宽高的div背景颜色为red点击变成blue //点击后能够不停切换 提示:if
(document.getElementById('myDiv').style.backgroundColor == 'red'){
document.getElementById('myDiv').style.backgroundColor = 'blue';
}
else{
document.getElementById('myDiv').style.backgroundColor = 'red';
}
}
</script>
<div id="myDiv" style="width:200px; height:200px; background-color:red;" onclick="changeColor()"></div>
设计一个下拉框,选项为“红色”、“蓝色”,设计一个DIV,当下拉列表选择切换时,DIV背景根据选择的选项切换颜色。
好的,您可以参考以下代码实现:
HTML 代码:
```
<select id="color-select">
<option value="red">红色</option>
<option value="blue">蓝色</option>
</select>
<div id="color-div">颜色变化的 DIV</div>
```
CSS 代码:
```
#color-div {
width: 200px;
height: 200px;
background-color: red;
}
```
JavaScript 代码:
```
const colorSelect = document.getElementById('color-select');
const colorDiv = document.getElementById('color-div');
colorSelect.addEventListener('change', e => {
const selectedColor = e.target.value;
if (selectedColor === 'red') {
colorDiv.style.backgroundColor = 'red';
} else if (selectedColor === 'blue') {
colorDiv.style.backgroundColor = 'blue';
}
});
```
这样当用户选择下拉框中的选项时,会触发 `change` 事件,然后根据选择的选项修改 DIV 的背景颜色。希望能帮到您。