DOM操作表格及样式2

检测浏览器是否支持DOM1级CSS能力或DOM2级CSS能力,IE上并不精确
alert('DOM1级CSS能力：'+document.implementation.hasFeature('CSS','2.0'));
alert('DOM2级CSS能力：'+document.implementation.hasFeature('CSS2','2.0'));

<div id="box" style="color:red; background:#ccc; font-size:20px; float:right;">测试Div</div>
获取行内style样式
window.onload=function(){
var box=document.getElementById('box');
alert(box.style); //CSSStyleDeclaration对象
alert(box.style.fontSize);//把-号去掉，后面的字符大写
alert(box.style.background);

alert(box.style.cssFloat);//非IE浏览器对关键字保留字的用法
alert(box.style.styleFloat);//IE浏览器的调用方式
alert(box.style.cssFloat||box.style.styleFloat); //跨浏览器兼容
}

赋值：
box.style.color='red';
box.style.fontSize='20px';
box.style.background='#ccc';
box.style.cssFloat='right';

typeof box.style.cssFloat!='undefined'?box.style.cssFloat='right':box.style.styleFloat='right'; ////跨浏览
器兼容

查看css文本：cssText
alert(box.style.cssText); //查看css文本
box.style.setProperty('color','blue'); //火狐旧版本不支持 没什么用 removeProperty('color'); IE不支持

PS：style属性只能获取和设置行内，不能获取内联和链接

计算后的样式怎么获取？style没有设置的
var style=window.getComputedStyle(box,null);
alert(style.fontSize); //计算后的样式，一般表示默认样式和设置后的样式

var style=box.currentStyle;
alert(style.color);
alert(style.fontSize);

var style=window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;
alert(style);
//计算样式的获取，不仅仅可以获取没有设置的默认样式，也可以获取内联和链接
//为什么可以获取内联和链接呢？
//因为不管你在哪里设置css，最终会驻留在浏览器的计算样式里
alert(box.style.border); //复合型属性就无法获取了
alert(style.borderTopColor); //border这个属性被计算后就不存在了