第一百一十六节，JavaScript，DOM操作样式

JavaScript，DOM操作样式

一．操作样式

CSS作为(X)HTML的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最新的CSS能力。CSS的能力和DOM级别密切相关，所以我们有必要检测当前浏览器支持CSS能力的级别。

DOM1级实现了最基本的文档处理，DOM2和DOM3在这个基础上增加了更多的交互能力，这里我们主要探讨CSS，DOM2增加了CSS编程访问方式和改变CSS样式信息。

DOM一致性检测

implementation对象的hasFeature()方法

hasFeature()方法检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力，参数第一个css级别，参数二css版本，返回布尔值，IE上不精确
使用方式：
document.implementation.hasFeature(‘css级别‘, ‘css版本‘)

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    //检测浏览器是否支持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模块。

1.访问元素的样式

CSS属性及JavaScript调用

任何HTML元素标签都会有一个通用的属性：style。它会返回CSSStypeDeclaration对象。下面我们看几个最常见的行内style样式的访问方式。

CSS属性及JavaScript调用

style属性，获取元素节点的行内style样式，也就是行内css样式，返回样式的集合

style属性，获取到样式集合后，可以使用样式属性名称获取或设置属性值
使用方式：
目标节点.style

//<div id="box" style="color: #ff2217; background: #fff137; font-size: 20px; float: right;">测试1</div>
window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    var yshi = document.getElementById(‘box‘);  //通过ID获取到目标节点
    alert(yshi.style); //style属性，获取元素节点的行内style样式，也就是行内css样式，返回样式的集合
    //返回：[object CSS2Properties] 样式集合

    //通过样式属性名称，获取属性值
    alert(yshi.style.color);  //查看color颜色属性值
    //返回;rgb(255, 34, 23) 浏览器计算过的颜色属性值

    alert(yshi.style.background); //查看背景颜色属性值
    //返回;#fff137   浏览器计算过的颜色属性值

    alert(yshi.style.fontSize);  //查看字体大小属性值
    //注意：属性名称单词如果是两段或者三段的，如：font-size，在写属性名称时将(-)分隔符去掉，分隔符后面的第一个字母大写，如：fontSize
    //返回：20px

    //alert(yshi.style.float);  //查看浮动属性值，
    //注意：float 是js的保留字，如果遇到关键字或保留字，在属性名称前加小写的css,然后将属性名称第一个字母大写，如下
    //alert(yshi.style.cssFloat); //查看浮动属性值，
    //但是cssFloat    IE浏览器不支持，IE可以将前面的css换成style，如：styleFloat
    //alert(yshi.style.styleFloat);
    //但是styleFloat   除了IE外其他浏览器也不支持
    //所以我们需要做一个兼容
    //做一个逻辑或，第一个不支持，就会用第二个
    alert(yshi.style.cssFloat || yshi.style.styleFloat);    //非IE用cssFloat，IE用styleFloat

};

以上取值方式也可以赋值，最后一种赋值可以如下：

window.onload = function() { //window.onload事件，等待html执行完成后，执行匿名函数
    var yshi = document.getElementById(‘box‘);  //通过ID获取到目标节点
    //三元运算，判断如果浏览器支持cssFloat就用cssFloat，如果不支持就用styleFloat
    typeof yshi.style.cssFloat != ‘undefined‘ ? yshi.style.cssFloat = ‘right‘ : yshi.style.styleFloat = ‘right‘;
};

DOM2级样式规范为style定义了一些属性和方法

DOM2级样式规范为style定义了一些属性和方法

1