点击div改变其他div的背景图片为点击div的背景图片
时间: 2024-05-10 14:17:11 浏览: 92
在div底部显示背景图片实现代码
5星 · 资源好评率100%
可以通过JavaScript实现这个功能。首先,为需要点击的div添加一个点击事件监听器,然后获取该div的背景图片,最后将其他需要改变背景图片的div的背景图片设置为该div的背景图片即可。
HTML代码示例:
```html
<div id="div1" class="clickable"></div>
<div id="div2"></div>
<div id="div3"></div>
```
CSS代码示例:
```css
.clickable {
background-image: url('clickable-bg.jpg');
/* 其他样式 */
}
#div2, #div3 {
background-image: url('default-bg.jpg');
/* 其他样式 */
}
```
JavaScript代码示例:
```javascript
var clickableDiv = document.getElementById("div1");
var defaultDivs = document.querySelectorAll("#div2, #div3");
clickableDiv.addEventListener("click", function() {
var bgImage = window.getComputedStyle(clickableDiv).getPropertyValue("background-image");
defaultDivs.forEach(function(div) {
div.style.backgroundImage = bgImage;
});
});
```
当点击`div1`时,`div2`和`div3`的背景图片将会变为`div1`的背景图片。
阅读全文