javascript基础：DOM4操作表格和样式

我们使用style属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,通过 getComputedStyle和currentStyle,这只能获取却无法设置。 

一、链接样式简介

创建一个basic.css文件

/*这是通过调换id来达到更换css样式的目的 不推荐这样做。*/#box{    color: red;    background: green;    font-size: 20px;}#pox{    color: green;    background: red;    font-size: 40px;}/*这是通过更换class来达到更换css样式的目的*/.aaa{    color:red;}.bbb{    background:green;}

在xhtml文件中添加如下代码

<link rel="stylesheet" type="text/css" href="basic.css"/>

二、更改元素节点的样式

判断支持css样式的能力

//检测浏览器是否支持 DOM1 级 CSS 能力或 DOM2 级 CSS 能力alert('DOM1 级 CSS 能力:' + document.implementation.hasFeature('CSS', '2.0')); alert('DOM2 级 CSS 能力:' + document.implementation.hasFeature('CSS2', '2.0'));

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

通过调换id来进行样式更改的方法

window.onload = function(){    //通过调换id来更换css样式 非常不推荐这么做会造成混乱 应保持id的唯一性    var box = document.getElementById('box');    box.id = 'pox';};

通过调换class来进行样式更改的方法

//通过调换class来更换css样式window.onload = function(){  var box = document.getElementById('box');    box.className = 'aaa';//会覆盖掉以前的，相当于重新赋值    //class属性不像id属性，id属性是唯一的，class属性是可以叠加的。    //使用这种方式能添加多个样式，但是显得冗余。不推荐。    //可以自己写个方法来 实现添加、删除class属性。    box.className = 'aaa bbb';    //添加一个新类属性    addClass(box,'ccc');//自定义的方法    //删除一个类属性    removeClass(box,'aaa');//自定义的方法};

以下是自定义的方法

/** *  判断是否存在这个 class * @parameter element    节点对象 * @parameter className  类名 * return 存在返回true  不存在返回false */function hasClass(element, className) {    //element.className返回节点包含的class属性的字符串类似：'aaa bbb'    return !!element.className.match(new RegExp('(\\s|^)'+className+'(\\s|$)'));}

/** *  添加一个 class 如果不存在的话 * @parameter element    节点对象 * @parameter className  新添加的类名 * */function addClass(element, className) {    if (!hasClass(element, className)) {        element.className += " "+className; }}

/** *  删除一个 class 如果存在的话 * @parameter element    节点对象 * @parameter className  要删除的类名 * */function removeClass(element, className) { if (hasClass(element, className)) {    element.className = element.className.replace(        new RegExp('(\\s|^)'+className+'(\\s|$)'),' ');} }

三、操作样式表CSSStyleSheet  
style属性只能操作行内样式，不能操作链接和内联样式。

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

document.implementation.hasFeature('StyleSheets', '2.0') //是否支持 DOM2 级样式表

1、sheet对象

//方法一：    //得到的是tagName= link 的元素节点的集合    var links = document.getElementsByTagName('link');    //得到第一个名为link的元素节点    var link =links[0];    //得到样式表对象    var sheetOther = link.sheet;//非IE浏览器支持    var sheetIE = link.stylesheet;//IE浏览器支持    //做兼容    var sheet = link.sheet || link.stylesheet;    alert(sheet);

//方法二:    //样式表集合    var sheets = document.styleSheets;    //得到第一个样式表 这个不存在兼容问题都支持    var sheet = sheets[0];    alert(sheet);

sheet对象支持的属性

    var disable = sheet.disabled;//是否为不可用状态    var title = sheet.title;//title    var href = sheet.href;//链接文件    var type = sheet.type;//类型    var rules = sheet.cssRules;//规则集合 IE不支持    var position = sheet.insertRule('body {background-color:green}', 0);//在样式表第一个位置添加一个规则，返回的是位置  IE不支持    sheet.deleteRule(0);//删除第一个位置的规则 IE不支持

//IE支持     sheet.rules; //对应cssRules     sheet.addRule("body", "background-color:red", 0);//对应insertRule     sheet.removeRule(0); //对应deleteRule

由于非IE与IE支持的方法不同，需要做兼容

//插入规则：兼容IE于非IE；    function insertRule(sheet, selectorText, cssText, position) {        //如果是非 IE        if (sheet.insertRule) {            sheet.insertRule(selectorText + "{" + cssText + "}", position);        }        //如果是 IE        else if (sheet.addRule) {            sheet.addRule(selectorText, cssText, position);        }    }

//删除规则：兼容IE于非IE；    function deleteRule(sheet, index) {        //如果是非 IE        if (sheet.deleteRule) {            sheet.deleteRule(index);        //如果是 IE        }        else if (sheet.removeRule) {            sheet.removeRule(index);        }    }

2、rule对象

    var rule = rules[0];//得到第一个规则    rule.cssText; /当前规则的样式文本    rule.selectorText; //#box,样式的选择符     rule.style.color; //red,得到具体样式值

PS1:Chrome浏览器在本地运行时会出现问题,rules会变成null,只要把它放到服务器上允许即可正常。

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