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[ ...
随机推荐
- xp的停止更新对我们有什么影响?
微软与2001年推出windows xp系统,这款系统的成功毋庸置疑,但由于太过成功,微软在随后推出的vista系统和win7系统普及起来却异常困难.大多数人已经习惯了xp的操作,再加上一批铁杆旧电脑 ...
- 【浏览器那些基础】Android平台有那些CPU类型
在编译Android应用的时候,需要配置支持的CPU类型,而目前Android支持的CPU类型包含了ARM和X86,所以在编译前需要指定CPU类型(不同的cpu的特性不一样): X86系列的 expo ...
- opencv中遇到的的一些错误
一:错误提示:OpenCV Error:Bad argument<src and dst have different formats> in unkown function,file.. ...
- Linux下启用Chrome/Firefox的Java插件
JDK 已经安装好,可是浏览器执行 Java Applet 时提示需安装 Java 插件. 这时,在浏览器安装文件夹中 plugins 文件夹下创建2个重要的符号链接就可以. libnpjp2.so ...
- C++ Primer的课后规划问题的第八章
1.写通常需要一个参数(字符串的地址).字符串和打印功能. 只要.假设提供了第二个参数(int种类),而这个参数不0,的次数的函数打印串数量为该功能将被称为(意,字符串的打印次数不等于第二个參数的值. ...
- MVC3 验证码
public ActionResult GetValidateCode() { string code = CreateValidateC ...
- windows版的node.js简单示例
1.下载node.exe放到任意目录,假设E:\nodejs\ 2.在E:\nodejs\下新建helloworld.js,输入以下内容,保存关闭 var http = require('http') ...
- WPF qq界面(转)
原文:http://blog.csdn.net/u013981858/article/details/49130885 刚开始学WPF,自己写了个小东西,说实话写的并不好,好多东西不懂只是用现在懂的东 ...
- BZOJ 1618: [Usaco2008 Nov]Buying Hay 购买干草( dp )
无限背包dp.. 因为题目中说至少到 H 磅 , 我就直接把 H * 2 了.. ----------------------------------------------------------- ...
- java多线程——同步块synchronized详解
Java 同步块(synchronized block)用来标记方法或者代码块是同步的.Java同步块用来避免竞争.本文介绍以下内容: Java同步关键字(synchronzied) 实例方法同步 静 ...