javascript - 用JS改变一个div的颜色

Question

因此，我设置了一个简单的 onclick 函数，用于更改 div 的背景。这是我的 JS 代码；

var colour = document.getElementById("backgroundColour");

function changeToColour1() {
    colour.style.backgroundColor = "#47535F";
}

function changeToColour2() {
    colour.style.backgroundColor = "#82A3B2";
}

这是我的 HTML 代码；

<button id="colour1" class="colours" onclick="changeToColour1()"></button>

<button id="colour2" class="colours" onclick="changeToColour2()"></button>

<div id="backgroundColour"></div>

单击按钮时如何让 div 更改其颜色？

Answer 1

一种更简洁的方法是只使用 javascript 向您的元素添加类，并让 CSS 控制颜色。

$('#colour1').on('click',function(){
  $('#backgroundColour').removeClass('colour1 colour2').addClass('colour1');
});

$('#colour2').on('click',function(){
  $('#backgroundColour').removeClass('colour1 colour2').addClass('colour2');
});

在你的 CSS 中放置

#backgroundColour.colour1 {
  background-color: #47535F;
}

#backgroundColour.colour2 {
  background-color: #82A3B2;
}