LO-ME

一、检测浏览器是否支持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>方式则无法获取到。

 

分类:

技术点:

相关文章: