通过 JavaScript 以不同的方式来操作 CSS 样式是可能的。
首先，你可以使用 Document.stylesheets 来获得一个附加在文档上的所有样式表的列表，它返回一个包含 CSSStyleSheet 对象的类数组。然后你就可以根据需要添加/删除样式了。然而，我们不打算对这些功能进行扩展，因为它们是一种有点过时的、难以操作样式的方式。还有更多更简单的方法。
第一种方法是直接将内联样式添加到你想动态样式的元素上。这是通过 HTMLElement.style 属性实现的，它包含了文档中每个元素的内联样式信息。你可以设置这个对象的属性来直接更新元素样式。
作为示例，把下面的代码行加到我们的例子中：
jspara.style.color = "white";
para.style.backgroundColor = "black";
para.style.padding = "10px";
para.style.width = "250px";
para.style.textAlign = "center";
重新载入页面，你将看到样式已经应用到段落中。如果在浏览器的 Page Inspector/DOM inspector 中查看段落，你会看到这些代码的确为文档添加了内联样式：
html style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;"> We hope you enjoyed the ride.
备注：
请注意，CSS 样式的 JavaScript 属性版本是用小驼峰命名法书写的，而 CSS 版本采用连字符（烤串命名法）（例如，backgroundColor 对 background-color）。确保你不要把这些混为一谈，否则将无法工作。
还有一种在你的文档上动态操作样式的常见方法，我们现在就来看看。
删除之前添加到 JavaScript 中的五行代码。
在 HTML 的
中添加下列代码 :html
现在我们改为使用 HTML 操作的常用方法——Element.setAttribute()——它接受两个参数：想在元素上设置的属性、要为它设置的值。在这种情况下，我们在段落中设置类名为 highlight：
jspara.setAttribute("class", "highlight");
刷新你的页面，不会看到任何改变——CSS 仍然应用于该段落，但这次是通过给它一个类，由我们的 CSS 规则选择，而不是作为内联 CSS 样式。
两种方式各有优缺点，选择哪种取决于你自己。第一种方法需要较少的设置，适合于简单的使用，而第二种方法更纯粹（混合 CSS、JavaScript 和内联样式通常不是一种好的实践，而该方法不会产生这些）。当你开始构建更大和更多的应用程序时，你可能会更多地开始使用第二种方法，但这真的取决于你。
在这一点上，我们还没有做任何有用的事！使用 JavaScript 来创建静态内容是没有意义的，你还不如直接把它写进你的 HTML，而不使用 JavaScript。它比 HTML 更复杂，而且用 JavaScript 创建你的内容也有其他附带的问题（比如不能被搜索引擎阅读）。
在接下来的几节中我们将看看 DOM API 一些更实际的用途。
备注：
你可以在 GitHub 上找到我们的 dom-example.html 的完成版演示（也可以看看它的在线运行版本）。
