单击照片会执行叠加/弹出照片。我想更改弹出照片的背景图像以匹配链接它的 < a > 的背景图像。这个问题已经被问过很多次了，但我无法拼凑出正常运行的代码。我也想避免使用任何包，如果可能的话，只使用 css 是理想的，比如onclick="document.getElementById("photoEnlarged")style.backgroundImage = 'cardinal2'"调用函数的 div： <div class="photoFrame"> <a onclick="myFunction('cardinal2')" href="#photoEnlarged"> <img class="imgBird" src="Cardinal1.jpg"> </a> </div>功能：<script> function myFunction(newURL) { var x = document.getElementById("photoEnlarged"); x.style.backgroundImage = newURL; };</script>正在更改的元素的 CSS：#photoEnlarged { height: 635px; width: 850px; margin: 0 auto; position: relative; z-index: 10; display: none; background: url(Cardinal1.jpg); background-size: cover; border-color: #FFFFFF; border-style: double; border-width: 5px;}本网页的目录：
3 回答
守候你守候我
TA贡献1802条经验 获得超10个赞
查看现有的 CSS：
url(Cardinal1.jpg)
现在看看你分配的值：
cardinal2
你错过了url()部分和文件扩展名。
关于您的编辑：
x.style.backgroundImage = URL(newURL);
JavaScriptURL函数将创建一个新的 URL 对象。
你不想那样。
您需要一个在开始和结束处带有和的字符串。url()
x.style.backgroundImage = "url(" + newURL + ")";
HUH函数
TA贡献1836条经验 获得超4个赞
这是我最终使用的确切函数/调用：
功能：
<head>
<script>
function changeImg(imgURL) {
document.getElementById('photoEnlarged').style.backgroundImage = 'url(' + imgURL +' )';
}
</script>
</head>
调用函数：
<div class="photoFrame">
<a onclick="changeImg('YellowCrownedNightHeron1.jpg')" href="#photoEnlarged">
<img class="imgBird" src="YellowCrownedNightHeron1.jpg">
</a>
</div>
添加回答
举报
0/150
提交
取消