zoukankan      html  css  js  c++  java
  • 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;
        }
    
  • 相关阅读:
    线段的平移和旋转
    《构建之法》第一章读书笔记
    课程大作业总结
    2016.1.8
    2016.1.7
    2016.1.6总结
    初学MFC
    实时控制软件第三次编程作业
    实时控制软件设计第二次编程作业
    实时控制软件设计第一次编程作业
  • 原文地址:https://www.cnblogs.com/2014-cjs/p/4691153.html
Copyright © 2011-2022 走看看