时间戳

首页 > 解决方案 > Onclick 更改 div 图像以及背景颜色

javascript - Onclick 更改 div 图像以及背景颜色

问题描述

我有一个图像作为 div 内的按钮。默认情况下，当我单击 div 时，我会显示背景为绿色的 image1，我应该将背景颜色更改为蓝色并更改为 image2。现在我只能改变颜色但不能改变图像。如何更改图像和背景颜色？

var count = 0;
        
        function setColor(id) {
            var property = document.getElementById(id);
            if (count == 0) {
                property.style.backgroundColor = "blue";
                document.getElementById('1').src = '~/Images/Icons/image1.png';
                count = 1;
            } else {
                property.style.backgroundColor = "green";
                document.getElementById('1').src = '~/Images/Icons/image2.png';
                count=0
            }
        }
.buttonclass {
	margin-left: 30px;
	margin-bottom: 2px;
	margin-top: 2px;
	width: 25px;
	height: 25px;
	box-sizing: border-box;
	vertical-align: middle;
	text-align: center;
	position: absolute;
	z-index: 100000;
	border: solid 1px #777;
	background-color: green;
	padding: 0px;

}
<div class="buttonclass" id="1" onclick="setColor(1);" >
    <img id="1" src="~/Images/Icons/image1.png">
</div>

标签： javascripthtml

解决方案

您已经有一个名为“property”的变量，您可以使用它。

将您的 JavaScript 更改为：

var count = 0;  

    function setColor(id) {
        var property = document.getElementById(id);
        if (count == 0) {
            property.style.backgroundColor = "blue";
            property.src = '~/Images/Icons/image1.png';
            count = 1;
        } else {
            property.style.backgroundColor = "green";
            property.src = '~/Images/Icons/image2.png';
            count=0
        }
    }

或者您可以将其缩短为：

var count = 0;
const COLORS = [
    "blue",
    "green"
];

function setColor(id) {
    var property = document.getElementById(id);

    property.style.backgroundColor = COLORS[count]
    property.src = ('~/Images/Icons/image' + count + '.png';

    var count = count == 0 ? 1 : 0;
}

推荐阅读