currentStyle和getComputedStyle的兼容写法
今天学习javascript的时候，教程中介绍了一种简单实现jQuery 中css()方法的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="样式" id="btn">
<div id="div"></div>
<script>
function css(obj, attr, value) {
if (arguments.length === 2) {
return obj.currentStyle[attr];
} else if(arguments.length === 3){
obj.style[attr] = value;
}
}
window.onload = function (){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div"); oBtn.onclick = function () {
css(oDiv, 'background', 'green');
console.log(oDiv.currentStyle.width);
// console.log(getComputedStyle(oDiv, false).width);
}
}
</script>
</body>
</html>
然而当我用chrome浏览器测试的时候，浏览器却抛出了一个错误
Uncaught TypeError: Cannot read property 'width' of undefined
于是马上联想到这必定又是浏览器大战中留下来的兼容问题，于是小白开始上网搜索，总结如下：
currentStyle：获取计算后的样式，也叫当前样式、最终样式。
优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。
注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。
非常遗憾的是，这个好使的东西也不能被各大浏览器完美地支持。准确地说，在我测试的浏览器中，IE8和Opera 11弹出了“object CSSStyleDeclaration”；FF 12、chrome 14则弹出“undefined”。
虽然currentStyle无法适用于所有浏览器，但是可以根据以上测试的结果来区分开支持、不支持的浏览器，然后再找到兼容的写法。
其实在FF浏览器中我们可以使用getComputedStyle(obj,false)来达到与IE下currentStyle相同的效果。
getComputedStyle(obj,false)：在FF新版本中只需要第一个参数，即操作对象，第二个参数写“false”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。
以下是兼容写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#div{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<input type="button" value="样式" id="btn">
<div id="div"></div>
<script>
function css(obj, attr, value) {
if (arguments.length === 2) {
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, false)[attr];
} } else if(arguments.length === 3){
obj.style[attr] = value;
}
}
window.onload = function (){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div"); oBtn.onclick = function () {
css(oDiv, 'background', 'green');
console.log(css(oDiv, 'width'));
// console.log(getComputedStyle(oDiv, false).width);
}
}
</script>
</body>
</html>
不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。
<script>
// 哪个元素
// 哪个样式
function getStyle(obj, attr) {
var style;
if (obj.currentStyle) {
style = obj.currentStyle[attr];
} else{
style = getComputedStyle(obj, false)[attr];
}
return style;
}
window.onload = function (){
var oDiv = document.getElementById("box");
console.log(getStyle(oDiv, 'backgroundColor'));
} </script>
currentStyle和getComputedStyle的兼容写法的更多相关文章
- js获取样式、currentStyle和getComputedStyle的兼容写法
currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...
- javascript:currentStyle和getComputedStyle的兼容写法
currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...
- [转]currentStyle和getComputedStyle的兼容写法
currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...
- currentstyle和getComputedStyle兼容问题
currentStyle:获取计算后的样式,也叫当前样式.终于样式. 长处:能够获取元素的终于样式,包含浏览器的默认值,而不像style仅仅能获取行间样式,所以更经常使用到. 注意:不能获取复合样式如 ...
- javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽
运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...
- js中style,currentStyle和getComputedStyle的区别以及获取css操作方法
在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...
- javascript获取行间样式和非行间样式--兼容写法
style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...
- JS——样式获取的兼容写法
样式获取 普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式,只能获取行内式 window.getComputedStyle ...
- Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法
style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...
随机推荐
- python自定义排序函数
Python内置的 sorted()函数可对list进行排序: >>>sorted([36, 5, 12, 9, 21]) [5, 9, 12, 21, 36] 但 sorted() ...
- JS中的RegExp对象常用属性和方法
JavaScript提供了一个RegExp对象来完成有关正则表达式的操作和功能,每一条正则表达式模式对应一个RegExp实例.有两种方式可以创建RegExp对象的实例. 使用RegExp的显式构造函数 ...
- PC游戏编程(入门篇)（前言写的很不错）
PC游戏编程(入门篇) 第一章 基石 1． 1 BOSS登场--GAF简介 第二章 2D图形程式初体验 2．l 饮水思源--第一个"游戏"程式 2．2 知其所以然一一2D图形学基础 ...
- hdoj 1028 Ignatius and the Princess III(区间dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1028 思路分析:该问题要求求出某个整数能够被划分为多少个整数之和(如 4 = 2 + 2, 4 = 2 ...
- 解决外贸电商难题，PayPal中国外贸电商大会圆满礼成
在全球经济一体化的背景下,越来越多的中国企业将目光转移到了海外.对中国的企业而言,要想将生意做到海外大致有两种方法可供选择,一是到海外设立分支机构或者分公司,二是通过外贸电子商务平台实现交易. ...
- 用Aspose.Cells控件读取Excel
Aspose是一个很强大的控件,可以用来操作word,excel,ppt等文件,用这个控件来导入.导出数据非常方便.其中Aspose.Cells就是用来操作Excel的,功能有很多.我所用的是最基本的 ...
- CSS的display、hover、overflow、©（版权符号）、borer-radius（边框圆角）
一.display: none 隐藏 block显示 visibility:hidden隐藏 visible显示 display:none和visibility:hidden这两个属性对应的值 ...
- Swift和OC 混编
1.首先创建一个Swift工程 2.导入或者创建一个OC文件(.h和.m) 3.再创建一个桥连接文件 4.然后文件样子为 5.在桥接链接里面导入头文件 6.通过targets->->bui ...
- 加特殊符号星号斜杠反斜杠/* \ */ !important等让css实现兼容各个浏览器的技巧的代码
在编写css样式表的时候常常会碰到一写浏览器兼容的问题,象是不同内核的浏览器显示就不一定相同,不同版本的的浏览器也会产生上下兼容的问题,如何解决这些问题成了我们苦恼的问题,如果你对css hac ...
- python中的迭代
#迭代Python的for循环不仅可以用在list或tuple上,还可以作用在其他可迭代对象上. #list这种数据类型虽然有下标,但很多其他数据类型是没有下标的,但是,只要是可迭代对象,无论有无下标 ...