onmouseover函数()访问HTML文档中的所有css背景图像url()

Question

const bg = document.getElementsByTagName("*");
bg.forEach(bgi => {
const b = bgi.computedStyleMap();
const c = b.get('background-image');
c.addEventListener("mouseover", e => {
const img = e.target.c;
if (c) location.assign(c);
});
});

#n {
background-position: 40% 45%;
}
.rap {
background-image: url("https://i.imgur.com/rDDRGYE.jpg");
background-attachment: sticky;
background-position: 77% 45%;
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-size: 40%;
color: lightcyan;
background-color: slategrey;
}
.ra {
background-image: url("https://cdn.boldmethod.com/images/blog/lists/2016/03/11-facts-about-the-harrier-jump-jet/4.jpg");
background-attachment: sticky;
background-position: 71% 90%;
height: 630px;
width: 100%;
bottom: 100%;
background-repeat: no-repeat;
background-color: slategrey;
}
.os {
height: 4350px;
width: 100%;
opacity: 0;
background-color: slategrey;
}
body {
background-image: url("https://files.yande.re/image/43e9ae14c74ba30fe78e66e30caea227/yande.re%20403366%20business_suit%20kono_subarashii_sekai_ni_shukufuku_wo%21%20megumin%20mishima_kurone%20raratina_dustiness_ford%20witch.jpg");
width: 2820 px;
height: 2050 px;
background-position-y: 80%;
background-repeat: no-repeat;
background-color: azure;
}

<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423" style="float:left">


<p>
<div class="rap"></div>
</p>
<p>
<div class="rap" id="n" style="float:left; position: absolute; left:1800px; top:16px"></div>
</p>
<img src="https://i.ibb.co/YjG8SgN/SG8ZEag.png" alt="guy" id="ki" width="367" height="644" style="float:left; position: absolute; left:930px; top:431px">
<img src="https://i.pinimg.com/originals/8f/a7/b9/8fa7b999f20538fe753013f69a8f441c.jpg" width="433" height="580" style="float:left; position: absolute; left:1300px; top:431px">
<img src="https://i.pinimg.com/originals/82/59/86/82598611fcf7003ca9cbd146085c3c1e.jpg" width="362" height="453" style="float:left; position: absolute; left:560px; top:431px">
<img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229" style="float:left; position: absolute; left:300px">
<div class="os"></div>


<div class="ra"></div>
<p>
<div class="ra" style="float:left; position: absolute; left:1900px; top:4798px"></div>
</p>
<img src="https://i.imgur.com/AcodYxf.jpeg" alt="guy" width="285" height="160" style="float:left; position: absolute; left: 1700px; top:16px">
<img src="https://i.imgur.com/AcodYxf.jpeg" alt="guy" width="285" height="160" style="float:left; position: absolute; left: 1700px; top:350px">

基本上，我试图为HTML文档上的所有背景图像url((分配一个mouseover函数((。我希望能够访问/触发每个背景图像url((，就好像当我鼠标悬停在一个href链接上时，它在点击一个href。

我尝试应用CSSImageValue，它是CSS对象模型(CSSOM(的一个子集。如何使此代码正常工作？

Answer 1

我不确定你想要实现什么，但你有很多基本概念是错误的。

下面将选择所有元素。它在NodeList上循环并检查元素是否具有计算的样式。如果没有，则忽略它。如果忽略了，则向元素添加一个事件侦听器。当您将鼠标悬停在元素上时，它会记录背景图像值。

注意：我没有修复无效的HTML。

const elems = document.querySelectorAll("*");
elems.forEach(elem => {
const bgImg = elem.computedStyleMap().get('background-image');
if (bgImg.value === 'none') return;
elem.addEventListener("mouseover", e => {
console.log(bgImg.toString());
});
});

#n {
background-position: 40% 45%;
}
.rap {
background-image: url("https://i.imgur.com/rDDRGYE.jpg");
background-attachment: sticky;
background-position: 77% 45%;
height: 400px;
width: 100%;
background-repeat: no-repeat;
background-size: 40%;
color: lightcyan;
background-color: slategrey;
}
.ra {
background-image: url("https://cdn.boldmethod.com/images/blog/lists/2016/03/11-facts-about-the-harrier-jump-jet/4.jpg");
background-attachment: sticky;
background-position: 71% 90%;
height: 630px;
width: 100%;
bottom: 100%;
background-repeat: no-repeat;
background-color: slategrey;
}
.os {
height: 4350px;
width: 100%;
opacity: 0;
background-color: slategrey;
}
body {
background-image: url("https://files.yande.re/image/43e9ae14c74ba30fe78e66e30caea227/yande.re%20403366%20business_suit%20kono_subarashii_sekai_ni_shukufuku_wo%21%20megumin%20mishima_kurone%20raratina_dustiness_ford%20witch.jpg");
width: 2820 px;
height: 2050 px;
background-position-y: 80%;
background-repeat: no-repeat;
background-color: azure;
}

<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://n.sinaimg.cn/sinacn10104/334/w1319h2215/20190107/c4a8-hrfcctn3630013.jpg" alt="guy" width="220" height="300" style="float:left; padding:20px">
<img src="https://stat.dokusho-ojikan.jp/dab52813-fbde-4b44-bbb2-6eea12b5bb35.jpg" alt="guy" width="300" height="423" style="float:left">


<p>
<div class="rap"></div>
</p>
<p>
<div class="rap" id="n" style="float:left; position: absolute; left:1800px; top:16px"></div>
</p>
<img src="https://i.ibb.co/YjG8SgN/SG8ZEag.png" alt="guy" id="ki" width="367" height="644" style="float:left; position: absolute; left:930px; top:431px">
<img src="https://i.pinimg.com/originals/8f/a7/b9/8fa7b999f20538fe753013f69a8f441c.jpg" width="433" height="580" style="float:left; position: absolute; left:1300px; top:431px">
<img src="https://i.pinimg.com/originals/82/59/86/82598611fcf7003ca9cbd146085c3c1e.jpg" width="362" height="453" style="float:left; position: absolute; left:560px; top:431px">
<img src="https://i.imgur.com/AcodYxf.jpeg" width="183" height="229" style="float:left; position: absolute; left:300px">
<div class="os"></div>


<div class="ra"></div>
<p>
<div class="ra" style="float:left; position: absolute; left:1900px; top:4798px"></div>
</p>
<img src="https://i.imgur.com/AcodYxf.jpeg" alt="guy" width="285" height="160" style="float:left; position: absolute; left: 1700px; top:16px">
<img src="https://i.imgur.com/AcodYxf.jpeg" alt="guy" width="285" height="160" style="float:left; position: absolute; left: 1700px; top:350px">