JavaScript--DOM--通过DOM-style属性来设置样式，并由此获取样式

通过style 属性获取样式有很大的局限性。

style 属性只能返回内嵌样式。换句话说，只有把CSS style 属性插入到标记里，才可以用DOM style 属性去查询那些信息：

<p id="example" style="color: grey; font: 12px 'Arial',sans-serif;">

这可不是使用样式的好办法——表现信息与结构混杂在一起了。更好的 办法是用一个外部样式表去设置样式：

p#example {
      
	color: grey; 
	font: 12px 'Arial', 
	sans-serif; 
}

把上面这段CSS代码存入文件styles.css 。然后，从example.html 文件里把内嵌在HTML代码里的样式删掉，只保留以下内容：

<p id="example">
An example of a paragraph 
p>

在example.html 文件的开头部分加上一个link 元素并让它指 向styles.css 文件：

<link rel="stylesheet" media="screen" href="styles/styles.css" />

样式还像以前那样作用到了HTML内容上，但与使用style 属性不同， 来自外部文件styles.css 的样式已经不能再用DOM style 属性检索 出来了。

在外部样式表里声明的样式不会进入style 对象，在文档的 部分里声明的样式也是如此。

style 对象只包含在HTML代码里用style 属性声明的样式。但这几乎 没有实用价值，因为样式应该与标记分离开来。

现在，你或许会认为用DOM去处理CSS样式毫无意义，但这里还有另一 种情况可以让DOM style 对象能够正确地反射出我们设置的样式。你用DOM设置的样式，就可以用DOM再把它们检索出来。

----也就是说，你用DOM设置的style属性或嵌入到HTML文档标签中的style属性值，可以用style属性来获取到，但是，对于外部引用的Css样式是不能用DOM的style属性获取的。

设置样式

style 对象的属性值永远是一个字符串。

style 对象的属性的值必须放在引号里，单引号或双引号均可：

para.style.color = 'black';

如果忘了使用引号，JavaScript会把等号右边的值解释为一个变量：

para.style.color = black;

如果前面并未定义过变量black ，则上面这行代码将无法工作。

用赋值操作符你可以设置任何一种样式属性，诸如font 之类的速记属 性也不例外：

para.style.font = "2em 'Times',serif";

参考目录

绝大多数内容来自于：JavaScript DOM编程艺术 （第2版) 作者:作者：[英] Jeremy Keith [加] Jeffrey Sambells 著 译者：杨涛 王建桥 杨晓云 等（第 9 章　CSS-DOM）