首页 > 代码库 > 第一百一十六节,JavaScript,DOM操作样式
第一百一十六节,JavaScript,DOM操作样式
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
第一百一十六节,JavaScript,DOM操作样式