Question

我的问题可能听起来很愚蠢，因为我是javascript的新手。我有以下的纯JavaScript代码。我想要实现的是在单击按钮时更改按钮的背景颜色。我试图使用普通的JavaScript实现这一点。没有jquery或任何其他框架。

JS

var save = document.querySelector('.wrapper .content button');
save.addEventListener('click', function () {    
    save.classList.style.background-color = 'red';
});

Answer 1

你必须这样做

var save = document.querySelector('.wrapper .content button');
save.addEventListener('click', function () {    
    save.style['background-color'] = 'red';
});

您也可以通过这种方式访问样式的background-color属性

save.style.backgroundColor = 'red';

带有 - 的CSS属性，如（背景颜色）在javascript中的camelCase中表示（ backgroundColor ）对象。

<强>段

var save = document.querySelector('.con');
save.addEventListener('click', function () {    
    save.style['background-color'] = 'yellow';
    //or  save.style.backgroundColor = 'yellow';
});

.con{
  width:100px;
  height:100px;
  background-color:red;
}

<div class="con"></div>

Answer 2

它是element.style.backgroundColor而不是element.classList.style.background-color

var save = document.querySelector('.demo');
save.addEventListener('click', function() {
  this.style.backgroundColor = 'red';
});

<div class='demo'> Click me </div>

详细

撰写save.classList.style.background-color时，Javascript会读取save.classList.style.background - color之类的减法。

Answer 3

var save = document.querySelector('button');
save.addEventListener('click', function () {    
    save.style.backgroundColor = 'red';
});

通过JavaScript classList向div添加样式

3 个答案:

详细