今天学习javascript的时候，教程中介绍了一种简单实现jQuery 中css()方法的写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #div{
  8.             width: 200px;
  9.             height: 200px;
  10.             background: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <input type="button" value="样式" id="btn">
  16.     <div id="div"></div>
  17.     <script>
  18.         function css(obj, attr, value) {
  19.             if (arguments.length === 2) {
  20.                 return obj.currentStyle[attr];
  21.             } else if(arguments.length === 3){
  22.                obj.style[attr] = value;
  23.             }
  24.         }
  25.         window.onload = function (){
  26.             var oBtn = document.getElementById("btn");
  27.             var oDiv = document.getElementById("div");
  28.  
  29.             oBtn.onclick = function () {
  30.                 css(oDiv, 'background', 'green');
  31.                 console.log(oDiv.currentStyle.width);
  32.                 // console.log(getComputedStyle(oDiv, false).width);
  33.             }
  34.         }
  35.     </script>
  36. </body>
  37. </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”也是大家通用的写法，目的是为了兼容老版本的火狐浏览器。

以下是兼容写法

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         #div{
  8.             width: 200px;
  9.             height: 200px;
  10.             background: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <input type="button" value="样式" id="btn">
  16.     <div id="div"></div>
  17.     <script>
  18.         function css(obj, attr, value) {
  19.             if (arguments.length === 2) {
  20.                 if (obj.currentStyle) {
  21.                     return obj.currentStyle[attr];
  22.                 } else {
  23.                     return getComputedStyle(obj, false)[attr];
  24.                 }
  25.  
  26.             } else if(arguments.length === 3){
  27.                 obj.style[attr] = value;
  28.             }
  29.         }
  30.         window.onload = function (){
  31.             var oBtn = document.getElementById("btn");
  32.             var oDiv = document.getElementById("div");
  33.  
  34.             oBtn.onclick = function () {
  35.                 css(oDiv, 'background', 'green');
  36.                 console.log(css(oDiv, 'width'));
  37.                 // console.log(getComputedStyle(oDiv, false).width);
  38.             }
  39.         }
  40.     </script>
  41. </body>
  42. </html>

不支持currentStyle的三款浏览器(FF、chrome、safari)，都是支持getComputedStyle的。

　　

  1. <script>
  2.         // 哪个元素
  3.         // 哪个样式
  4.         function getStyle(obj, attr) {
  5.             var style;
  6.             if (obj.currentStyle) {
  7.                 style = obj.currentStyle[attr];
  8.             } else{
  9.                 style = getComputedStyle(obj, false)[attr];
  10.             }
  11.             return style;
  12.         }
  13.         window.onload = function (){
  14.             var oDiv = document.getElementById("box");
  15.             console.log(getStyle(oDiv, 'backgroundColor'));
  16.         }
  17.  
  18. </script>

currentStyle和getComputedStyle的兼容写法的更多相关文章

  1. js获取样式、currentStyle和getComputedStyle的兼容写法

    currentStyle获取计算后的样式,也叫当前样式.最终样式.优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如backgr ...

  2. javascript:currentStyle和getComputedStyle的兼容写法

    currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...

  3. [转]currentStyle和getComputedStyle的兼容写法

    currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到. 注意:不能获取复合样式如bac ...

  4. currentstyle和getComputedStyle兼容问题

    currentStyle:获取计算后的样式,也叫当前样式.终于样式. 长处:能够获取元素的终于样式,包含浏览器的默认值,而不像style仅仅能获取行间样式,所以更经常使用到. 注意:不能获取复合样式如 ...

  5. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  6. js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    在js中,之前我们获取属性大多用的都是ele.style.border这种形式的方法,但是这种方法是有局限性的,该方法只能获取到行内样式,获取不了外部的样式.所以呢下面我就教大家获取外部样式的方法,因 ...

  7. javascript获取行间样式和非行间样式--兼容写法

    style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意 ...

  8. JS——样式获取的兼容写法

    样式获取 普通获取属性方式div.style.width或者div.style["width"]无法获取内嵌和外链式,只能获取行内式 window.getComputedStyle ...

  9. Javascript中style,currentStyle和getComputedStyle的区别以及获取css操作方法

    style: 只能获取行内style. 调用:obj.style.属性; 兼容:都兼容 currentStyle: 可以获取该obj所有style,但只可读. 调用:obj.currentStyle[ ...

随机推荐

  1. [转] iOS多线程编程之Grand Central Dispatch(GCD)介绍和使用

    介绍: Grand Central Dispatch 简称(GCD)是苹果公司开发的技术,以优化的应用程序支持多核心处理器和其他的对称多处理系统的系统.这建立在任务并行执行的线程池模式的基础上的.它首 ...

  2. 斯坦福 IOS讲义 课件总结 二

    1,OC里面传参数个数不同,可以是两个完全不同的方法.如 - (void)addCard:(Card *)card atTop:(BOOL)atTop; - (void)addCard:(Card * ...

  3. django 实现指定文件合并成压缩文件下载

    需求是在一列学生列表中选择指定的学生,然后下载他们上传的报告文档.

  4. 使用HISTCONTROL强制history忽略某条特定命令

    http://www.linuxnote.org/mandatory-use-of-histcontrol-ignore-a-certain-specific-command-history.html ...

  5. BZOJ 1088 扫雷Mine （递推）

    题解:如果确定了第一排前两个数,那么剩下的数是唯一确定的,所以只要分情况讨论即可. #include <cstdio> #include <cstring> int n,a[1 ...

  6. JAVA GUI学习 - JTabbedPane选项卡组件学习

    public class JTabbedPaneKnow extends JFrame { JTabbedPane jTabbedPane; JPanel jPanelRed; JPanel jPan ...

  7. hdoj 3062 Party(2-SAT)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3062 思路分析:将问题转换为2-SAT问题,需要注意的是将命题转换为有向图的方法:命题中A1, A2, ...

  8. poj 2051 Argus(优先队列)

    题目链接: http://poj.org/problem?id=2051 思路分析: 优先级问题,使用优先队列求解:当执行某个任务后,再增加一个任务到队列中, 该任务的优先级为执行任务的时间加上其时间 ...

  9. ccMacros

    #ifndef __CCMACROS_H__ #define __CCMACROS_H__ #ifndef _USE_MATH_DEFINES #define _USE_MATH_DEFINES #e ...

  10. poj1077 Eight【爆搜+Hash（脸题-_-b）】

    转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4298840.html   ---by 墨染之樱花 题目链接:http://poj.org/pr ...