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

Posted 2020-08-21 林贵秀

javascript，DOM操作样式

 

一．操作样式

 

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

 

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

DOM一致性检测

功能	版本号	说明
Core	1.0、2.0、3.0	基本的DOM,用于表现文档节点树
XML	1.0、2.0、3.0	Core的XML扩展，添加了对CDATA等支持
HTML	1.0、2.0	XML的HTML扩展，添加了对HTML特有元素支持
Views	2.0	基于某些样式完成文档的格式化
StyleSheets	2.0	将样式表关联到文档
CSS	2.0	对层叠样式表1级的支持
CSS2	2.0	对层叠样式表2级的支持
Events	2.0	常规的DOM事件
UIEvents	2.0	用户界面事件
MouseEvents	2.0	由鼠标引发的事件(如：click)
MutationEvents	2.0	DOM树变化时引发的事件
HTMLEvents	2.0	HTML4.01事件
Range	2.0	用于操作DOM树中某个范围的对象和方法
Traversal	2.0	遍历DOM树的方法
LS	3.0	文件与DOM树之间的同步加载和保存
LS-Async	3.0	文件与DOM树之间的异步加载和保存
Valuidation	3.0	在确保有效的前提下修改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调用

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

 

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定义了一些属性和方法

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

1