要更改当前元素的颜色并删除上次单击的背景,你可以使用JavaScript来操作DOM元素的样式。以下是一个简单的示例代码,展示了如何实现这一功能:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Element Color and Remove Last Clicked Background</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
<div id="element1">Element 1</div>
<div id="element2">Element 2</div>
<div id="element3">Element 3</div>
<script>
let lastClicked = null;
function changeColorAndRemoveBackground(element) {
if (lastClicked && lastClicked !== element) {
lastClicked.classList.remove('highlight');
}
element.style.color = getRandomColor();
lastClicked = element;
}
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
document.querySelectorAll('div').forEach(element => {
element.addEventListener('click', () => {
changeColorAndRemoveBackground(element);
});
});
</script>
</body>
</html>
style
属性,可以动态地改变元素的样式。通过上述代码和解释,你应该能够实现更改当前元素的颜色并删除上次单击的背景的功能。
领取专属 10元无门槛券
手把手带您无忧上云