JS盒子模型

 6.JS盒子模型:3X4+1 =13 个属性

client系列: 

  clientHeight/clientWidth:内容的宽度/高度+左右/上下填充(padding)和内容溢出没有关系(不包括边框高度)

  clinetTop:上边框的高度

  clinetLeft:左边框的宽度

offset系列:

   offsetWidth/offsetHeight:clientWidth/clientHeight+左右/上下边框

    offsetParent:当前元素的父级参照物

    offsetTop/offsetLeft:当前元素的外边框距离父级参照物的内边框距离的偏移量

scroll系列:

   scrollWidth/scrollHeight:和clientWidth/clientHeight一样(前提是内容没有溢出)

    如果内容有溢出(设置overflow=hidden后)

   scrollWidth:真实内容的宽度(包含溢出)+左填充

   scrollHeight:真实内容的高度(包含溢出)+上填充

   scrollLeft/scrollTop:滚动条卷去的宽度/高度

浏览器盒子模型兼容写法

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

 

posted @ 2017-05-14 13:08  且听风吟V  阅读(266)  评论(0编辑  收藏  举报