currentStyle:获取计算后的样式,也叫当前样式、终于样式。



长处:能够获取元素的终于样式,包含浏览器的默认值,而不像style仅仅能获取行间样式,所以更经常使用到。

注意:不能获取复合样式如background属性值,仅仅能获取单一样式如background-color等。



alert (oAbc.currentStyle);

很遗憾的是,这个好使的东西也不能被各大浏览器完美地支持。准确地说,在我測试的浏览器中,IE8和Opera 11弹出了“object CSSStyleDeclaration”;FF 12、chrome 14、safari 5则弹出“undefined”。



尽管currentStyle无法适用于全部浏览器,可是能够依据以上測试的结果来区分开支持、不支持的浏览器,然后再找到兼容的写法。



var oAbc = document.getElementById("abc");

if(oAbc.currentStyle) {

        //IE、Opera

        alert("我支持currentStyle");

} else {

        //FF、chrome、safari

        alert("我不支持currentStyle");

}

事实上在FF浏览器中我们能够使用getComputedStyle(obj,false)来达到与IE下currentStyle同样的效果。



getComputedStyle(obj,false):在FF新版本号中仅仅须要第一个參数,即操作对象,第二个參数写“false”也是大家通用的写法,目的是为了兼容老版本号的火狐浏览器。



兼容写法:



var oAbc = document.getElementById("abc");

if(oAbc.currentStyle) {

        //IE、Opera

        //alert("我支持currentStyle");

        alert(oAbc.currentStyle.width);

} else {

        //FF、chrome、safari

        //alert("我不支持currentStyle");

        alert(getComputedStyle(oAbc,false).width);

}

一个空白页面中body的id=”abc”,測试以上代码,IE和Opera弹出“auto”,其他三款浏览器则弹出“***px”。尽管结果不同,可是能够发现chrome和safari也都和火狐一样,顺利地读取到了属性值。不支持currentStyle的三款浏览器(FF、chrome、safari),都是支持getComputedStyle的。



结果表明:对浏览器是否支持currentStyle的推断 + getComputedStyle,就能够做到兼容各主流浏览器的效果。并且兼容写法并不复杂,你掌握了吗?^_^



支持currentStyle:IE、Opera

支持getComputedStyle:FireFox、Chrome、Safari



注意最后的弹出内容,currentStyle返回浏览器的默认值”auto”,而getComputedStyle则返回详细的值”**px”。

最新文章

  1. 突然想到一个问题:有关 cqrs 分离
  2. Zend Studio主题的设置
  3. SqlServer环境配置和卸载
  4. android adb常用命令
  5. java文档
  6. 移植FreeModbus+ModbusMaster+STM32至RT-Thread(初步)
  7. 来看看Meteor的功能
  8. SQL Server 2008 用户SA登录失败(错误18456)之图文解决方法
  9. 使用do...while的方法输入一个月中所有的周日
  10. c语言-三字符组
  11. [codeforces113D]Museum
  12. Python3 tkinter基础 Text window 文本框中插入按钮
  13. oracle11g 数据库修改 UTF8字符集
  14. vue把localhost改成ip地址无法访问—解决方法
  15. js各种小知识
  16. centos下从源码安装openssl 1.0.1g
  17. go 删除数组元素
  18. C++ STL使用说明
  19. Lucene7.2.1系列(三)查询及高亮
  20. ASP.NET 163 smtp服务器响应为:User has no permission

热门文章

  1. SLF4J warning or error messages and their meanings(转)
  2. java 基于JDK中的源码总结下String二
  3. asp.net下利用MVC模式实现Extjs表格增删改查
  4. QT工程pro设置实践(with QtCreator)----非弄的像VS一样才顺手?
  5. 为什么必须是final的呢?
  6. androidstudio 优化gradle编译效率
  7. cocos2d-x游戏开发 跑酷(两) 物理世界
  8. PHP开发-上传文件
  9. 开发指南专题八:JEECG微云高速开发平台数据字典
  10. 断剑重铸之日,席卷朗朗乾坤之时--PHP学习一月漫记