zepto 里的高宽

在zepto里.height();计算不准确

体现在以下两个方面：

1. display:none;的元素，计算不到其真实高宽

2. 当计算的元素有多个孩子节点时，计算到的高宽是当这元素仅包含第一个孩子节点时的高宽，第2，3。。。。。之后的孩子的高宽没计算在内

解决方案：

对于第一点，可以写个补充插件，来完善，如下：

/**
得到高宽，补充插件,修复当display为none是el.width()为0的bug
usage:
el.getW();//33
el.getH();//332
el.getSize();//{width:33,height:332}
**/
;(function($){
  $.extend($.fn, {
    getW: function(){
      // `this` refers to the current Zepto collection.
      // When possible, return the Zepto collection to allow chaining.
      //position: "absolute", visibility: "hidden", display: "block" 
      var pos=this.css('position')
         ,vis=this.css('visibility')
         ,dis=this.css('display')
         ,w=0
      ;
      this.css({
       "position": "absolute", "visibility": "hidden", "display": "block"
      });
      w=this.width();
      this.css({
       "position": pos, "visibility": vis, "display": dis
      });
      return w;
    }
    ,getH: function(){
     var pos=this.css('position')
         ,vis=this.css('visibility')
         ,dis=this.css('display')
         ,h=0
      ;
      this.css({
       "position": "absolute", "visibility": "hidden", "display": "block"
      });
      h=this.height();
      this.css({
       "position": pos, "visibility": vis, "display": dis
      });
      return h;
    }
    ,getSize: function(){
     var pos=this.css('position')
         ,vis=this.css('visibility')
         ,dis=this.css('display')
         ,w=0
         ,h=0
      ;
      this.css({
       "position": "absolute", "visibility": "hidden", "display": "block"
      });
      w=this.width();
      h=this.height();
      this.css({
       "position": pos, "visibility": vis, "display": dis
      });
      return {
       width:w
       ,height:h
      };
    }
  })
})(Zepto);

对于第二点，可以再完善下上面的插件即可，把没计算在内的子节点遍历下，然后，这样感觉很慢，不值得，为此宁愿根据具体代码环境具体处理

有兴趣的猿们可以尝试下，有更好的建议，欢迎留言

 

 

 

转载于:https://my.oschina.net/homeemail/blog/513847