javascript:currentStyle和getComputedStyle的兼容写法
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”
javascript:currentStyle和getComputedStyle的兼容写法的更多相关文章
- currentStyle和getComputedStyle的兼容写法
今天学习javascript的时候,教程中介绍了一种简单实现jQuery 中css()方法的写法 <!DOCTYPE html> <html lang="en"& ...
- [转]currentStyle和getComputedStyle的兼容写法
currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...
- js获取样式、currentStyle和getComputedStyle的兼容写法
currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- javascript中经典继承的兼容写法
function create(obj) { // 2.1 判断浏览器支持不支持 Object.create // 如果支持,直接使用 Object.create // 如果不支持,自己实现 if(O ...
- javascript 读取内联之外的样式(style、currentStyle、getComputedStyle区别介绍) (转载)
样式表有三种方式: 内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效. (也称作“内联样式”) 内部样式(internal Style Sheet):是写在 ...
- currentstyle和getComputedStyle兼容问题
currentStyle:获取计算后的样式,也叫当前样式.终于样式. 长处:能够获取元素的终于样式,包含浏览器的默认值,而不像style仅仅能获取行间样式,所以更经常使用到. 注意:不能获取复合样式如 ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- JavaScript获取HTML元素样式的方法(style、currentStyle、getComputedStyle)
一.style.currentStyle.getComputedStyle的区别 style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的. currentStyle可以弥补st ...
随机推荐
- win7下PHP+MySQL+CoreSeek中文检索引擎配置
1.Windows下的coreseek安装测试 (64位win7旗舰版) 官方参考:http://www.coreseek.cn/products-install/install_on_windows ...
- Chrome插件 postman的使用方法详解!最全面的教程
一 简介 Postman 是一款功能超级强大的用于发送 HTTP 请求的 Chrome插件 .做web页面开发和测试的人员应该是无人不晓无人不用!其主要特点 特点: 创建 + 测试:创建和发送任何的H ...
- ERP客户关系渠管理添加和修改联系人(二十一)
树形结构treeview 前端代码: <form id="form1" runat="server"> <div> <asp:Tr ...
- Spring AOP实现原理-动态代理
目录 代理模式 静态代理 动态代理 代理模式 我们知道,Spring AOP的主要作用就是不通过修改源代码的方式.将非核心功能代码织入来实现对方法的增强.那么Spring AOP的底层如何实现对方法的 ...
- vue-awesome-swiper使用纪实
最近做一个项目,需要用到轮播和全屏滑动功能,所以用到了vue-awesome-swiper插件,以下为个人记录下此插件的用法. 效果说明: 上面部分是个轮播图,自动开始轮播,轮播间隔为3000ms 推 ...
- Ubuntu美化及配置,常见问题解决方案
安装符合审美观,并且具有可用性的Ubuntu桌面,需要耗费一些时间与精力不过,相信我,这值得去做,你会享受这中间的过程,以及最后的成果 首先,我推荐安装的软件列表如下,在安装前,需要先执行以下的步骤: ...
- React Hooks新特性学习随笔
React Hooks 是 React 16.8 的新增特性.它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性. 前言 本篇主要以讲几个常用的api为主. 1.u ...
- View的工作原理(一) 总览View的工作流程
View的工作原理(一) 总览View的工作流程 学习自 <Android开发艺术探索> 简书博主-丶蓝天白云梦 Overview 从本章开始,开始学习View的工作原理,包括View的 ...
- leetcode 两数之和 python
两数之和 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数. 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用. 示例: 给定 nums = [2, 7, 11, 1 ...
- POJ1743 Musical Theme [后缀数组+分组/并查集]
Musical Theme Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 27539 Accepted: 9290 De ...