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,内联和链接可读可写。