这是我想做的。有四个图标，当我们点击一个图标时，它的背景图像应该改变。 当我们再次点击它时，第一张图片应该会再次出现。 这是我的代码。感谢您的帮助 ;我花了一些时间但没有找到解决方案:“if” block 不识别背景值。非常感谢你帮助我。
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Test</title>
<style type="text/css">
#image1, #image2, #image3, #image4 {
background: url('icon1.png');
width:24px;
height:24px;
}
</style>
</head>
<body>
<p id="image1" onclick="change(this)"></p>
<p id="image2" onclick="change(this)"></p>
<p id="image3" onclick="change(this)"></p>
<p id="image4" onclick="change(this)"></p>
<script type="text/javascript">
function change(element) {
if(element.style.background == "url('icon1.png')") {
element.style.background = "url('icon2.png')";
} else {
element.style.background = "url('icon1.png')";
}
}
</script>
</body>
</html>
最佳答案
if 条件第一次可能不会结果为真，因为背景图像是通过 css 类而不是内联样式应用的。
所以解决方案是
function change(element) {
var imgURL = window.getComputedStyle(element).getPropertyValue("background-image");
if(imgURL == "url('icon1.png')") {
element.style.background = "url('icon2.png')";
} else {
element.style.background = "url('icon1.png')";
}
}
关于javascript - 单击更改图标图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23457158/