javascript - 通过 JavaScript classList 为 div 添加样式

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 properties with a - like (background-color) are represented in camelCase in Javascript (backgroundColor) objects.

片段

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>