js 獲取元素style 兼容 IE firefox

參考資料：
一篇很好的參考文章
http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/

用js裸鞋一個獲取元素style值時遇到了兼容性問題，對的，就是IE這奇葩

（1）在獲取元素時，IE使用的是obj.currenStyle而FF使用的是obj.getComputedStyle,二者都是隻讀屬性，而obj.style則是可讀可寫，可是style只能獲取內嵌的style，從而致使了須要使用前兩個函數來獲取樣式
摘：http://www.cnblogs.com/flyjs/archive/2012/02/20/2360502.html
樣式表有三種方式
內嵌樣式（inline Style） ：是寫在Tag裏面的，內嵌樣式只對全部的Tag有效。
內部樣式（internal Style Sheet）：是寫在HTML的裏面的，內部樣式只對所在的網頁有效。
外部樣式表（External Style Sheet）：若是不少網頁須要用到一樣的樣式(Styles)，將樣式(Styles)寫在一個以.css爲後綴的CSS文件裏，而後在每一個須要用到這些樣式(Styles)的網頁裏引用這個CSS文件。 最經常使用的是style屬性，在JavaScript中，經過document.getElementById(id).style.XXX就能夠獲取到XXX的值，但意外的是，這樣作只能取到經過內嵌方式設置的樣式值，即style屬性裏面設置的值。

（2）在獲取元素時，若是要選擇的是類的話，就須要使用getElementsByClassName, 可是在IE8如下是不支持的，因此須要使用getElementsByTagName來獲取全部tag，而後在循環檢索className是否包含所需的類名

附上代碼：

function getStyle(id, style) {
      var $obj = null,
        styleVal = "",
        _idname,
        _classname
        ;
      if (id[0] === '#') {
        _idname = id.slice(1);
        $obj = document.getElementById(_idname);
      }
      else if (id[0] === '.') {
        _classname = id.slice(1);
        if(document.getElementsByClassName) {
          console.log("could use getElementsBylassName");
          $obj = document.getElementsByClassName(_classname)[0];
        }
        else {
          console.log("IE8如下 could not use getElementsBylassName！");
          // IE 8 如下不能經過class標籤getElementsByClassName函數獲取元素
          getElementsByClassName = function(className) {
            var children = document.getElementsByTagName("*");
            console.log("children"+children.toString());
            var _elems = new Array();
            for (var i = 0, len = children.length; i < len; i++) {
              var _child = children[i];
              var _classname = _child.className.split(' ');
              console.log(children[i].className);
              for (var j = 0, j_len = _classname.length; j < j_len; j++) {
                if (className == _classname[j]) {
                  _elems.push(_child);
                  break;
                }
              }
            }
            return _elems;
          }
          $obj = getElementsByClassName(_classname)[0];
        }
      }
      if ($obj != null) {
        if ($obj.currentStyle) {
          console.log("IE");
          // styleVal = $obj.currentStyle[style];
          styleVal = $obj.currentStyle[style] ? $obj.currentStyle[style] : $obj.currentStyle.getPropertyValue(style);
        }
        else if (window.getComputedStyle) {
          console.log("FF");
          // 兼容IE9以上和其餘瀏覽器
          styleVal = window.getComputedStyle($obj, null)[style] ? window.getComputedStyle($obj, null)[style] :
          window.getComputedStyle($obj, null).getPropertyValue(style);
        }
        else {
          console.log("could not get style" + style);
        }
      }
      else {
        console.log("could not find obj");
        return null;
      }
      return styleVal;
    }