《JavaScript DOM编程艺术》13：CSS-DOM

这是《JavaScript学徒》系列的第十三课，今天会介绍《JavaScript DOM编程艺术》第9章CSS-DOM，学习用JavaScript来操作CSS。

本文同步发表于我的个人网站：

https://zacklive.com/javascript-dom-css/​

教学视频连结

YouTube

腾讯

微博

B站

结构--表示--行为

HTML：结构层（Structural layer）

CSS：表示层（Presentation layer）

JavaScript：行为层（Behavior layer）

style属性

<p id="example" style="color: grey; font-family: 'Arial', sans-serif;">An Example</p>

var para = document.getElementById("example");

alert(typeof para.style);

style属性是一个对象（object）。

para.style.color

para.style.fontFamily

所有带"-"号的属性改用驼峰命名，font-family变成fontFamily。

只能取得内嵌（inline）样式。

可直接修改：

para.style.color = "black";

className属性

覆盖class属性：

para.setAttribute("class", "intro");

或

para.className = "intro";

添加新class：

para.className += " intro";

注意"intro"前面有一个空格。也可自行写一个函数判断className是否存在，再决定是直接赋值还是添加。