一、检测浏览器是否支持css
CSS 作为(X)HTML 的辅助，可以增强页面的显示效果。但不是每个浏览器都能支持最新的 CSS 能力。CSS 的能力和 DOM 级别密切相关，所以我们有必要检测当前浏览器支持CSS 能力的级别。
DOM1 级实现了最基本的文档处理，DOM2 和 DOM3 在这个基础上增加了更多的交互能力，这里我们主要探讨 CSS，DOM2 增加了 CSS 编程访问方式和改变 CSS 样式信息。
这种检测方案在 IE 浏览器上不精确，IE6 中，hasFeature()方法只为 HTML 和版本1.0 返回 true，其他所有功能均返回 false。但 IE 浏览器还是支持最常用的 CSS2 模块。
<script type="text/javascript"> window.onload = function(){ //检测浏览器是否支持 DOM1 级 CSS 能力或 DOM2 级 CSS 能力 alert('DOM1 级 CSS 能力：' + document.implementation.hasFeature('CSS', '2.0')); alert('DOM2 级 CSS 能力：' + document.implementation.hasFeature('CSS2', '2.0')); } </script>
二、获取和设置行内样式
任何 HTML 元素标签都会有一个通用的属性：style。它会返回 CSSStypeDeclaration 对象。下面我们看几个最常见的行内 style 样式的访问方式。
1、使用行内style获取行内样式
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取 box alert(box.style);//[object CSS2Properties] CSS样式对象 alert(box.style.color); //获取行内样式中的color属性的值 alert(box.style.fontSize);//获取行内样式中的font-size属性的值，在这里如果属性有-这种符号有前缀后缀的需要将-去掉，后一个单词首字母大写 alert(box.style.background); alert(box.style.float); //获取行内样式中的float属性的值，但这种写法非IE不支持，要使用下面的写法 alert(box.style.styleFloat); //这种写法IE可以，其他不可以 alert(box.style.cssFloat); //获取行内样式中的float属性的值,但这种写法IE6,7,8不支持，要使用下面的写法做兼容 alert(box.style.cssFloat || box.style.styleFloat);//跨浏览器兼容，谁有值就返回谁 } </script> </head> <body> <div id="box" style="color:#F00;background:#ccc; font-size:20px; float:right;">测试Div</div> </body>
2、使用行内style设置行内样式
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取 box box.style.color="red"; box.style.fontSize="30px"; box.style.background="#ccc"; box.style.cssFloat = "right";//IE6,7,8没有用 //做兼容： typeof box.style.cssFloat != 'undefined'? box.style.cssFloat='right':box.style.styleFloat='right'; } </script> </head> <body> <div id="box">测试Div</div> </body>
三、DOM2 级样式规范为 style 定义了一些属性和方法。
Firefox、Safari、Opera9+、Chrome 支持这些属性和方法。IE 6,7,8只支持 cssText，而getPropertyCSSValue()方法只有 Safari3+和 Chrome 支持。
<script type="text/javascript"> window.onload = function(){ var box = document.getElementById('box'); //获取 box alert(box.style.cssText); //获取 CSS 代码 alert(box.style.length); //获取CSS属性的数量 IE6,7,8不支持 //box.style.removeProperty('color'); //移除某个 CSS 属性，IE6,7,8 不支持 box.style.setProperty('color','blue'); //设置某个 CSS 属性，IE6,7,8 不支持 } </script> </head> <body> <div id="box" style="color:#F00; font-size:20px;">测试Div</div> </body>
style 属性仅仅只能获取行内的 CSS 样式，对于另外两种形式内联<style>和链接<link>方式则无法获取到。