操作HTML标签的样式

HTML中定义的样式一共有三种方式：

　　1. 外部样式表，使用<link>元素导入外部的样式表，样式表都是.css类型的文件；

　　2. 嵌入样式，使用<style>在HMTL文档中定义的样式；

　　3. 元素特定样式：即在某个特定标签中style属性定义的样式；

 

元素的style属性

　　JavaScript为每个元素提供了一个style属性，让我们可以方便的用编程的方式控制样式。这个style对应的是元素特定样式中的style属性，比如有一个<div id="myDiv" style="border: 4px solid green; width: 100px;"></div>标签元素，JavaScript中的style属性就是对应标签中的style属性。我们可以这样使用：

　　var div = document.getElementById("myDiv");

　　div.style.width = "200px"; // 可读写，修改宽度之后，浏览器会马上呈现变化（建议最好要使用px之类的度量单位，否则浏览器可能忽略）

几乎素所有的CSS样式都可以用style进行访问和设置，而且使用这些属性有一些通用的规则：

　　CSS属性　　　　JavaScript属性

　　color　　　　　  style.color

　　font-family　　  style.fontFamily

如果CSS中的属性是带有-符号的，就去掉它，然后变成驼峰的拼写方式就变成了JavaScript的属性。但是有一个例外，就是float的JavaScript属性是cssFloat，IE则是styleFloat。在DOM2级的样式中还为style属性定义了一些新的属性和方法，下面列出一些比较有用的：

　　cssText：返回整个style中定义的CSS样式字符串，上面的例子就是："border: 4px solid green; width: 100px;"。如果给它赋值就会重写整个style样式；

　　length：CSS样式的数量，一组键值对算一个；

　　getPropertyValue(cssName)：返回参数指定的css属性名对应的值；

　　removeProperty(cssName)：删除参数指定的css属性；

　　item(index)：返回索引对应的css属性的名字；

 

计算样式

　　上面提到的style属性只会针对某个特定的元素进行样式设置。如果某个元素还引入了外部样式表或者嵌入样式，元素可能会使用class属性导入一些样式，也可能有一些全局的样式，即为div或者body一类标签所设置的样式。对于这么多样式，浏览器会按照一定的方式进行层叠计算，然后得出最后的样式，再应用在元素上。计算的步骤如下：

　　1. 先计算全局的样式，即那些为某一类标签所设定的样式；

　　2. 然后计算class属性中设定的样式，如果有部分CSS属性的样式值和第一步骤的样式值重叠，就忽略上一个步骤的样式，应用当前的样式；如果class属性中引用了多个样式，那么从左到右依次计算，按照后面的样式会覆盖前面的样式为原则；

　　3. 最后再计算style属性中的样式，也会按照后面的样式覆盖前面的样式为原则；

重叠到最后得出的样式就叫计算样式，DOM2级中定义了一个属性叫document.defaultView，这个属性有一个方法叫getComputedStyle(元素)可以得出指定元素的最后的计算样式。用法如下：

　　var computedStyle = document.defaultView.getComputedStyle( myDiv );

　　alert( computedStyle.width );

取出的计算样式都是只读的，无法直接修改。对于IE并不支持这个属性，但是有一个替代属性：currentStyle。这个属性来自每个元素自身，所以兼容性的写法就是：

　　function getComputedStyle( element ) {

　　　　if ( typeof document.defaultView.getComputedStyle === "function" ) {

　　　　　　return document.defaultView.getComputedStyle( element );

　　　　}

　　　　else {

　　　　　　return element.currentStyle;

　　　　}

　　}

 

操作样式表

　　无论是用<link>标签引入外部样式表，还是使用<style>标签创建的嵌入样式表，都属于StyleSheet类型，我们可以通过编程的方式访问这些样式表对象。

　　DOM2级提高了一个document.styleSheets的集合对象，里面保存了当前文档使用的所有样式表对象，我们只需要用[]加索引就可以像数组一样取出某个特定的样式表对象。除此之外，我们也可以通过<link>和<style>标签获取对应的样式表对象，IE使用styleSheet属性，其他浏览器使用sheet属性：兼容性的代码如下：

　　function getCSSStyleSheet( sheetElement ) {

　　　　return sheetElement.sheet || sheetElement.styleSheet;

　　}

　　var link = document.getElementsByTagName("link")[0];

　　var sheet = getCSSStyleSheet( link ); // 取出样式表对象

　　样式表对象有很多使用的属性和方法：

　　disabled： 可读写，默认为false表示不禁用该样式表，设置成true就会立即禁用该样式表，浏览器也会重新计算样式；

　　href： 引入样式表的url，如果是嵌入样式，则为null；

　　ownerNode：指向引用该样式表的节点，可能是<link>或<style>；

　　type：类型，样式表则是“text/css”；

　　cssRules：样式表中的规则，IE用rules属性代替，可以用[index]的方式取出其中的某条规则；

　　deleteRule(index)：删除样式表中指定i的index的那条规则，IE中用removeRule代替；

　　insertRule(rule, index)：在样式表中指定位置插入一条规则，IE中用addRule代替；

关于CSS中的规则，其实就像如下的一个样式：

　　div {

　　　　width: 100px;

　　　　height: 100px;

　　}

这就是某个样式表中的一条规则，它属于CSSStyleRule类型的一个对象，所以它也有自己的属性和方法，常用的有：

　　cssText：返回这个规则的文本值，“div { width: 100px; height: 100px; }”；

　　parentStyleSheet：引用当前样式表；

　　selectorText：选择器的文本，如div；

　　style：规则中所有样式，如style.width，可以设置，注意会影响所有使用该规则的元素；

　　type：样式表始终是1，IE不支持；

例子：

　　var sheet = document.styleSheets[0];

　　sheet.insertRule("div { border: 20px solid yellow;}", 1 ); // 插入的位置很重要，如果插入的样式被后面的样式替换，就不会起作用

　　// sheet.addRule("div", "border: 20px solid yellow", 1); IE的方式

　　sheet.deleteRule(1); // 删除索引为1的规则

　　// sheet.removeRule(1); // IE的方式

转载于:https://www.cnblogs.com/iRidescent-ZONE/archive/2012/07/12/2587289.html