前端盒子模型和一些关于样式的函数封装

----------------------注：zepto没有关于盒子模型client系列的API----------------------

client系列

clientHeight/clientwidth

内容的高度+上下填充(height+paddingTop+paddingBottom)
内容的宽度+左右填充(width+paddingLeft+paddingRight)

如果内容没有设置宽高，宽高指的是容器内容撑开的真实高度
如果设置了宽高，宽高就是设置的值

• ---对比jquery---

(ele).innerWidth()

• 这个方法不适用于window 和 document对象，对于这些对象可以使用$(ele).height()代替
• 当元素或其父元素被隐藏时，(ele).innerHeight()前可见

clientLeft/clientTop 左边框的宽度/上边框的高度

border[Left/Top]Width
-------------基本上没用

---

offset系列

offsetHeight/offsetwidth

相当于： clientHeight+上下边框 / clientwidth+左右边框

• ---对比jquery---

(ele).outerWidth()

• 获取匹配元素集合中第一个元素的当前计算外部高度（包括padding，border和可选的margin）如果在一组空的元素集合上调用，返回undefined
• (ele).outerWidth(true)
  相当于(ele).outerWidth()+margin的值
• 当元素或其父元素被隐藏时，.outerHeight()得到的值不能保证准确。要得到准确的值，你应该确保该元素在使用.outerHeight()前可见

offsetLeft/offsetTop

当前元素的外边框距离父级参照物的内边框的偏移量
offsetParent:当前元素的父级参照物
父级参照物:与当前元素最近的经过定位(position不等于static)的父级元素

• 获取元素到视口的left和top

function offset(ele){
  var L=ele.offsetLeft;
  var T=ele.offsetTop;
  var par=ele.offsetParent;
  while(par){
      if(navogator.userAgent.indexOf('MSIE 8.0')==-1){//ie8需要多加上边框
        L+=par.clientLeft;
        T+=par.clientTop;
      };
      L+=par.offsetLeft;
      T+=par.offsetTop;
      par=par.offsetParent;
  }
return {left:L,top:T}
}

offset.jpg

• ---对比jquery---

(ele)..offset().top

• .offset()方法允许我们检索一个元素 (包含其 border 边框，不包括 margin) 相对于文档（document）的当前位置。
• .position()
  .position()是相对于相对于父级元素的位移。当通过全局操作（特别是通过拖拽操作）将一个新的元素放置到另一个已经存在的元素的上面时，若要取得这个新的元素的位置，那么使用 .offset()更合适。

• ---对比zepto---

• 获得当前元素相对于document的位置。返回一个对象含有： top, left,width和height
• 当给定一个含有left和top属性对象时，使用这些值来对集合中每一个元素进行相对于document的定位。

---

scroll系列

scrollWidth/scrollHeight

• 和clientHeight/clientwidth一样，前提是：容器的内容没有溢出的情况。
• 如果内容有溢出 得到的值都是≈的值

scrollLeft/scrollTop

• 滚动条卷去的宽度/高度

---

文档的宽高

function win (attr,value){
  if(typeof value ==='undefined'){
    return document.documentElement[attr]||document.body[attr]
  }else{
    document.documentElement[attr]=value;
    document.body[attr]=value
  }
}

---

总结盒子模型

---

• js盒子模型中：client系列/offset系列/scrollWidth/scrollHeight都是只读属性，只能通过属性获取值，不能通过属性修改元素样式
• scrollTop/scrollLeft:滚动条卷去的高度、宽度。是唯一可以读写的属性（用于做回到顶部等滚动效果的属性）
• box.scrollTop=0; 瞬间回到顶部
• scroll的最大值是 真实的高度-屏幕的高度

---

js获取、设置元素的样式信息

就是jquery的$(ele).css();

function getCss(curEle,attr){
  var val=null;
  if('getComputedStyle' in window){
    val=getComputedStyle(curEle,null)[attr];
  }else{
    val=curEle.currentStyle[attr]
  }
  var reg=/^-?/(\d+)?(\.\d+)?/(px|pt|em|rem)?$/i
  return  reg.test(val)?parseFloat(val):val;
}

function setCss(curEle,attr,value){
  var reg=/^(width|height|top|bottom|left|right|((margin|padding)(Top|Bottom|Left|Right)?))$/;
  if(reg.test(attr)){
    if(!isNaN(value)){
      value+='px';
    }
  }
  if(attr==='opacity'){
    curEle['style']['opacity']=value;
    curEle['style']['filter']='alpha(opacity'+value*100+')';
    return
  }
  if(attr==='float'){
    curEle['style']['cssFloat']=value;
    curEle['style']['styleFloat']=value;
    return
  }
  curEle['style']['attr']=value;
}

function setGroupCss(curEle,obj){
  if(Object.prototype.toString.call(obj)!==[object Object]){
    return;
  }
  for(var key in obj){
    if(curEle.hasOwnProperty(key)){
      setCss(curEle,key,cur[key]);
    }
  }
}