JavaScript学习记录-DOM操作CSS

CSS可以增强页面的显示效果，但不是每个浏览器都能支持最新的CSS能力。CSS的能力和DOM级别密切相关，所以有必要检测当前浏览器支持CSS能力的级别。DOM1级实现了最基本的文档处理，DOM2和DOM3在这个基础上增加了更多的交互能力。DOM2增加了CSS编程访问方式和改变CSS样式信息。

检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力，

alert('DOM1级CSS能力：' + document.implementation.hasFeature('CSS', '2.0'));    //DOM1级CSS能力：true
alert('DOM2级CSS能力：' + document.implementation.hasFeature('CSS2', '2.0'));   //DOM2级CSS能力：true

然而，这种检测方案在IE浏览器上是不精确的。IE6中，hasFeature()方法只为HTML和版本1.0返回true，其他所有功能均返回false，但IE浏览器还是支持最常用的CSS2模块。

一般CSS分为行间样式、<style>包裹的CSS、<link>引入外部的CSS。

行间样式

1、访问元素的样式

任何HTML元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration对象。

CSS属性及JavaScript调用
CSS属性	JavaScript调用
color	style.color
font-size	style.fontSize
float float	非IE：style.cssFloat IE：style.styleFloat

JavaScript调用CSS属性，即JavaScript的取值方式，同样可以进行赋值，譬如，对于上表中中最后一个的兼容性赋值：

var box=document.getElementById("box");
alert(typeof box.style.cssFloat != 'undefined' ? box.style.cssFloat = 'right' : box.style.styleFloat = 'right')

DOM2级样式规范为style定义了一些属性和方法
属性或方法	说明
cssText	访问或设置style中的CSS代码
length	CSS属性的数量
parentRule	CSS信息的CSSRule对象
getPropertyCSSValue(name)	返回包含给定属性值的CSSValue对象
getPropertyPriority(name)	如果设置了!important，则返回，否则返回空字符串
item(index)	返回指定位置CSS属性名称
removeProperty(name)	从样式中删除指定属性
setProperty(name,v,p)	给属性设置为相应的值，并加上优先权

var box=document.getElementById("box");
box.style.setProperty("color","blue")；

通过style可以获取单一值的CSS样式，但对于复合值的样式信息，就需要通过计算样式来获取。DOM2级样式，window对象下提供了getComputedStyle()方法。它接受两个参数，第一个是需要计算的样式元素，第二个是伪类(:hover、:after...)，如果没有没有伪类，就填null。但是IE不支持这个DOM2级的方法，有个类似的属性可以使用currentStyle属性。并且getComputedStyle和currentStyle，只能获取却无法设置。获取复合样式的兼容性写法：

var box = document.getElementById('box');
var style = window.getComputedStyle ? window.getComputedStyle(box, null) : null || box.currentStyle;
alert(style.color);

2、操作行间样式

使用style属性可以设置行内的CSS样式，而通过 class 调用是最常用的方法。

var box = document.getElementById('box');
box.className="one two three";

如果想要再添加一个class="four"，还使用className则显得冗余，这是可以定义一个addClass函数来快捷的添加class名。首先得判断行间有没有需要添加的相同class名，然后可以添加或者删除。

首先，判断一个class是否存在，如果有返回true否则false。譬如已经有一个class="aaa"，再添加一个class="aa"，这就需要正则表达式的判断，RegExp('(\\s|^)'+className+'(\\s|$)')，class之间需要有空格/s，

function hasClass(element, className) {  
	return element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));
}

增添一个class，

function addClass(element, className){
	if (!hasClass(element, className)){
        element.className += " "+className;  
	}
}
addClass(box,"four");

删除一个class，

function removeClass(element, className){
    if (hasClass(element, className)){
        element.className = element.className.replace(new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');   
	}
}
removeClass(box,"three");

综上，style属性仅仅只能获取行内的CSS样式，对于另外两种形式内联<style>和链接<link>方式则无法获取到。

<style>、<link>方式

CSSStyleSheet类型表示通过<link>元素和<style>元素包含的样式表。

var link=document.getElementsByTagName("link")[0];
alert(link);                                    //返回[object HTMLLinkElement]
var style=document.getElementsByTagName("style")[0];
alert(style);                                    //返回[object HTMLStyleElement]

1、获取sheet的方式一

link标签中有stylesheet属性，通过它来操作link中样式，

var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet;	
alert(sheet);

这就得到[object CSSStyleSheet]，表示链接的CSS样式表对象，就此我们就可以通过sheet来操作<link>中的样式了。但是link.sheet在IE中不兼容，IE中使用link.styleSheet，需要做一下兼容性处理：

var link = document.getElementsByTagName('link')[0];
var sheet = link.sheet || link.styleSheet;	
alert(sheet);

2、获取sheet的方式二

方式一还需要做兼容性处理，显得麻烦，二document下styleSheets属性在各个浏览器都适用，

var sheet=document.styleSheets[0];
alert(sheet);   //返回[object CSSStyleSheet]

sheet的属性或方法
属性或方法	说明
disabled	获取和设置样式表是否被禁用（true被禁用）
href	如果是通过<link>包含的，则样式表为URL，否则为null
title	ownerNode中title属性的值
ownerRule	@import导入的情况下，指向表示导入的规则，IE不支持
deleteRule(index)	删除cssRules集合中指定位置的规则，IE不支持
insertRule(rule, index)	向cssRules集合中指定位置插入rule字符串，IE不支持

样式的规则：一群样式的集合表示一个规则。

得到第一个规则的CSS文本

alert(sheet.cssRules[0].cssText)

得到第一个规则的选择符

alert(sheet.cssRules[0].selectorText)

添加一条规则在第一个位置上

alert(sheet.insertRule("body{background-color:red}",0))

上表中标红的三个方法，IE都不支持，IE有自己的方法，

IE下sheet的属性或方法
sheet.rules	代替cssRules的IE版本
sheet.removeRule(0)	代替deleteRule的IE版本
sheet.addRule("body", "background-color:red", 0)	代替insertRule的IE版本

另外，CSSStyleRule还可以使用的属性如下表，

属性	说明
cssText	获取当前整条规则对应的文本，IE不支持
parentRule	@import导入的，返回规则或null，IE不支持
parentStyleSheet	当前规则的样式表，IE不支持
selectorText	获取当前规则的选择符文本
style	返回CSSStyleDeclaration 对象，可以获取和设置样式
type	表示规则的常量值，对于样式规则，值为1，IE不支持

总结

三种操作CSS的方法，第一种style行内，可读可写；
第二种行内、内联和链接，使用getComputedStyle或currentStyle，可读不可写；
第三种cssRules或rules，内联和链接可读可写。