第九章-DOM与CSS

style属性

文档中每个元素节点都有一个属性style。style属性包含着元素样式，查询这个属性将返回一个对象而不是一个简单的字符串。样式都存放在这个style对象的属性里。

var element = getElementById("example")
//查看颜色属性
element.style.color
//element.style.font-family正确写法
element.style.fontFamily

通过style属性获取样式有很大的局限性，只有把CSS style属性插入到标记里，才可以用DOM style属性去查询那些信息。

但是我们用DOM设置的样式，就可以用DOM再把它们检索出来。
style对象的属性值永远是一个字符串。style 属性的值必须放在引号里，单引号或双引号都可以。

para.style.color = 'black';

如果没有加引号，JS会把等号右边解释为一个变量，如果前面没有定义过该变量，上面代码将无法运行。

何时该使用DOM脚本设置样式

在绝大多数场合，还是应该使用CSS来去声明样式。但在CSS使用不方便的场合，可以利用DOM对文档样式做一些增强。

根据元素在节点树里的位置来设置样式

CSS还无法根据元素之间的相对位置关系找出某个特定元素，但是可以用DOM来找出目标元素，并把样式添加给它。

根具某种条件反复设置某种样式

例如表格斑马线，JS擅长处理重复性任务，用一个while或for循环就可以轻松地遍历一个很长的列表。

ClassName属性

上文都是一直在使用DOM直接设置或者修改样式，我们还可以通过JS代码更新这个元素的 class 属性来间接的改变样式。

//设置一个元素的class属性
element.className = "属性名"

这个技巧有一个不足之处：通过className属性设置某个元素的class属性时将替换而不是追加该元素原有的class设置。

解决方法：可以利用字符串拼接操作，把新的class设置值追加到className属性上。

elem.className += " intro";
/*以下是给一个元素追加新的class时封装的函数：1.检查 className 属性值是否为null2.如果是，把新的class设置直接赋值给className属性3.如果不是，把一个空格和新的class设置值追加到className属性上去
*/
function addClass(element,value){if (!element.className) {element.className = value;}else {newClassName = element.className;newClassName += " ";newClassName += value;element.className = newClassName;}
}