JavaScript/更改元素样式
正如您在前面的章节中所看到的，元素的属性可以通过 JavaScript 进行修改。两个属性，class 和 style，会影响元素的视觉表示。它们包含 CSS 代码。
<!DOCTYPE html>
<html>
<head>
<script>
function toggle() {
"use strict";
// ...
}
</script>
<style>
.divClassGreen {
background-color: green;
padding: 2em;
margin: 1em
}
.divClassRed {
background-color: red;
padding: 2em;
margin: 1em
}
</style>
</head>
<body id="body">
<div id="div_1" class="divClassGreen">A DIV element</div>
<div id="div_2" style="background-color: blue; padding: 2em; margin: 1em">Another DIV element</div>
<button id="buttonToggle" onclick="toggle()" style="margin:1em 0em 1em 0em">Start</button>
</body>
</html>
class 属性标识在 HTML 的 style 元素中创建的 CSS 类。style 属性定义内联（本地）的 CSS 规则。
要修改它们，像处理任何其他 属性 一样处理它们。它们没有特殊的规则或例外。
我们使用上面的 HTML 文件；只有 JavaScript 函数发生了变化。当按钮被点击时，该函数将 CSS 类 'divClassRed' 分配给 'div_1'，并将 'div_2' 的内联 'style' 属性更改为不同的值。
function toggle() {
"use strict";
// locate the elements to be changed
const div_1 = document.getElementById("div_1");
const div_2 = document.getElementById("div_2");
// modify its 'class' attribute
div_1.setAttribute("class", "divClassRed");
// an 'inline' modification
div_2.setAttribute("style", "background-color: silver; padding: 4em; margin: 2em");
//or: div_2.style = "background-color: silver; padding: 4em; margin: 2em";
}
'style' 属性在其自身的属性中存储 CSS 属性，如 'color' 或 'padding'。这与一般的 JavaScript 对象规则相关。因此，以下语法等同于前面的 div_2.setAttribute 调用。
div_2.style.backgroundColor = "silver"; // see below: camel-case
div_2.style.padding = "4em";
div_2.style.margin = "2em";
在 CSS 中，一些属性在它们的名称中定义了一个连字符，例如 'background-color' 或 'font-size'。当您在 JavaScript 中以 style 的属性 的语法使用它们时，名称会略有变化。连字符后的字符必须用大写字母书写，连字符消失：'style.backgroundColor' 或 'style.fontSize'。这被称为 骆驼式命名法。
div_1.style.fontSize = "2em"; // the font's size as property of 'style'
/*
The next line would run into a syntax error because the hyphen
would be interpreted as a minus operation.
div_1.style.font-size = "2em";
*/
所有其他在 CSS 中出现此类名称的地方都不会改变。特别是 HTML <style> 元素内部显示的连字符语法，以及内联定义形式的使用保持不变。