用JS代码实现以下要求:两个div,分别叫div1,div2。div2在div1之中,单击div2,div2变成红色,单击div1,div2取消变色
时间: 2023-09-09 17:05:18 浏览: 62
### 回答1:
这是一个技术问题,可以回答。可以使用以下代码实现:
HTML代码:
```html
<div id="div1">
<div id="div2"></div>
</div>
```
CSS代码:
```css
#div1 {
width: 200px;
height: 200px;
background-color: gray;
position: relative;
}
#div2 {
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
top: 50px;
left: 50px;
}
```
JavaScript代码:
```javascript
var div2 = document.getElementById("div2");
var div1 = document.getElementById("div1");
div2.onclick = function() {
div2.style.backgroundColor = "red";
}
div1.onclick = function() {
div2.style.backgroundColor = "blue";
}
```
当点击div2时,div2的背景色将变成红色;当点击div1时,div2的背景色将恢复成蓝色。
### 回答2:
可以使用JavaScript代码来实现这个要求。首先,在HTML中设置两个div,一个是div1,一个是div2,并为它们分别指定id属性。
```html
<div id="div1">
<div id="div2"></div>
</div>
```
然后,使用JavaScript代码来实现点击div2时变红色,点击div1时取消变色的功能。可以通过添加事件监听器来实现。
```javascript
// 获取div1和div2的元素
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
// 给div2添加点击事件监听器
div2.addEventListener('click', function() {
// 将div2的背景颜色设置为红色
div2.style.backgroundColor = 'red';
});
// 给div1添加点击事件监听器
div1.addEventListener('click', function() {
// 将div2的背景颜色设置为默认值
div2.style.backgroundColor = '';
});
```
以上代码中,我们首先通过`document.getElementById`方法获取到div1和div2的元素。然后,分别给div2和div1添加了点击事件监听器。当div2被点击时,我们将div2的背景颜色设置为红色;当div1被点击时,我们将div2的背景颜色恢复为默认值。这样就实现了点击div2时变红色,点击div1时取消变色的功能。
注意,以上代码只是示例,具体实现可能需要根据实际情况进行调整。
### 回答3:
你可以使用JavaScript代码来实现这个要求。以下是一个简单的示例:
```javascript
// 获取div1和div2的元素
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
// 定义单击div2时,将div2变成红色的函数
function changeColor() {
div2.style.backgroundColor = "red";
}
// 定义单击div1时,将div2取消变色的函数
function cancelColor() {
div2.style.backgroundColor = "";
}
// 给div2添加单击事件监听器,调用changeColor函数
div2.addEventListener("click", changeColor);
// 给div1添加单击事件监听器,调用cancelColor函数
div1.addEventListener("click", cancelColor);
```
在上述代码中,我们首先使用`getElementById`通过元素的ID获取了div1和div2的元素。然后,我们定义了一个`changeColor`函数,用于将div2的背景颜色改为红色。接着,我们定义了一个`cancelColor`函数,用于将div2的背景颜色取消变色。最后,我们使用`addEventListener`给div2和div1分别添加了单击事件的监听器,分别调用了`changeColor`和`cancelColor`函数。
通过以上代码,当你单击div2时,div2的背景颜色会变成红色;当你单击div1时,div2的背景颜色会取消变色。