JS基础之盒子模型的常用属性

盒子模型

JS盒子模型指的是通过JS中提供的一系列的属性和方法，获取页面中的样式信息值#box有很多私有属性
->HTMLDivElement.prototype->HTMElement.prototype ->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype 在原型链上有很多共有的属性和方法
内容的高度和宽度：我们设置的width/height这两个样式就是内容的宽和高
如果没有设置高度，容器的高度会根据里面的内容自己进行时应，这样获取的就是真实内容的高；如果设置固定高度，不管内容是多了还是少了，其实我们内容的高度指的都是设定的那个值真实内容的宽度和高度：这个值得是实际内容的宽高（和我们设置的宽高没有必然联系），例如我们设置的高度是200px，如果内容有溢出，那么真实内容的高度是要把溢出内容加进来的

• 1.client 系列 （不是真实宽高） 私有属性
  clientWidth/clientHeight :内容的宽度/高度+左右/上下填充
  clientLeft:左边框宽度 clientTop:上边框高度
• 2.offset 系列
  offsetWidth/offsetHeight :clientWidth/clientHeight+左右上下边框
  和内容溢出是没有关系的
  offsetParent:当前元素的父级参照物
  offsetLft/offsetTop：当前元素的外边框距离父级参照物的偏移量
• 3.scroll系列
  scrollWidth/scrollHeight:和clientWidth/clientHeight一样（前提是
  内容没有溢出的情况下）如果内容溢出，我们获取的结果是如下规则
  scrollWidth:真是内容的宽度（包含溢出）+左填充
  scrollHeight:真是内容的高度（包含溢出）+上填充
  但是获取的值都是约等于值;因为同一个浏览器是否设置overflow:hidden是有影响的
  在不同的浏览器中获取到的结果是不同的
  scrollLeft和scrollTop:滚动条卷去(滚动条挡住的那部分)的宽度和高度
  关于JS盒子模型取值的问题
  我们通过13个属性值获取的结果永远不可能出现小数，都是整数，浏览器在计算结果的时候，在原来真是结果上四舍五入
  关于操作浏览器本身的盒子模型信息
  clientWidth/clientHeight 是当前浏览器可视区域的宽度和高度
  scrollWidth/scrollHeight是当前页面的真是高度和宽度（是一个约等于值）
  我们不管是那些属性，也不管是什么浏览器，不管是获取还是设置,想要都兼容都要写两套(必须document.documentElement在前)
  document.documentElement[attr] || document.body[attr]
  document.documentElement.clientHeight || document.body.clientHeight
  document.documentElement.scrollTop=0
  document.body.scrollTop=0
  编写一个有关于浏览器盒子模型的方法
  如果值传递了attr没有传递value ，默认的意思是获取样式值
  如果传了两个，意思是设置
  不严谨说这就是；类的重载：同一个方法，通过参数不同执行不同操作

    var box=document.getElementById('box');
    function win(attr,value) {
       if(typeof  value==='undefined'){//没有传递value值 属于获取
           return document.documentElement[attr] || document.body[attr]
       }
       //设置
       document.documentElement[attr]=value;
       document.body[attr]=value;
   }

获取元素的某一个具体的样式属性值
1.元素.style.属性名（需要我们把元素的样式写在行内样式中）不常用
2.在window中的getComputedStyle获取所有经过浏览器计算过的样式
浏览器计算过的样式:只要当前元素标签可以在页面中呈现出来，那么他的所有样式都是经过浏览器计算过的（渲染）->哪怕这些样式你没有写，我们也可以获取到,但是不兼容IE6-8,获取的结果是CSSStyleDeclaration这个类的一个实例：包含了当前元素所有样式属性和值
window.getComputedStyle(当前要操作的元素,当前元素的伪类（一般我们不用就写null）)
window.getComputedStyle->function
window.getComputedStyle(box,null).width['width']
IE6-8:使用currentStyle来获取浏览器计算过的样式 box.currentStyle.width
兼容写法
getCss:获取当前元素所有经过浏览器计算过样式中的[attr]对应的值
curEle:[object]当前要操作的元素对象
attr:[string] 我们要获取样式属性名称
使用try catch 来处理兼容
前提：必须保证try中代码在不兼容浏览器中执行的时候报错，这样的话我们才可以用catch捕获到异常的信息，进行其他的处理
问题：不管当前的是什么浏览器，都要把try中代码执行一遍，如果当前是IE7,window.getComputedStyle本身是不兼容的，但是我们也要先把代码执行一遍,报错了在把currentStyle执行一遍

 function getCss(curEle,attr) {
               var val=null;
              try {
                 val= window.getComputedStyle(curEle,null)[attr]
              }catch (e){
                  val=curEle.currentStyle[attr]
              }
              return val;
            }

var outer=document.getElementById('outer');
var inner=document.getElementById('inner');
var center=document.getElementById('center');

• 1.parentNode:父亲节点 HTML结构层级关系中的上一级元素
  center.parentNode ->inner
  inner.parentNode ->outer
  outer .parentNode ->body
  document.body.parentNode ->html
  document.documentElement.parentNode ->document
• 2.offsetParent:父级参照物,在同一个平面中，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没关系）
  一般来说一个页面中的所有元素参照物都是body
  center.offsetParent ->body
  inner.offsetParent->body
  outer .offsetParent ->body
  document.body.offsetParent ->null
  改变父级参照物需要通过position定位来改变
  outer.style.position='relative' position fixed 任意一个值都可以把腹肌参照物进行修改
  outer.style.position='relative'
  inner.style.position='relative'
  center.offsetParent ->inner
  inner.offsetParent->outer
  outer .offsetParent ->body
• 3.offsetTop/offsetLeft:当前元素(外边框)距离父级参照物(内边框)的偏移距离
  offset：等同于JQ中的offset方法，实现获取页面中任意一个元素距离Body的偏移量（包含左和上）,不管当前元素的父级参照物是谁; 获取到的结果是一个对象｛left:左偏移量，top:上偏移量｝,在标准的IE8中，我们使用offsetLeft/offsetTop其实把父级参照物的边框已经算到里边了，所以 不需要我们自己单独加边框了

 function offset(curEle) {
     var totalLeft=null,totalTop=null,par=curEle.offsetParent;
         totalLeft+=curEle.offsetLeft;
         totalTop=curEle.offsetTop;
         //只要没有找到body 我们就把父级参照物的边框和偏移也进行累加
         while(par){
             if(navigator.userAgent.indexOf('MSIE 8.0')===-1){
                 //累加父级参照物边框
                 totalLeft+=par.clientLeft;
                 totalTop+=par.clientTop;
             }
            //累加父级参照物本身的偏移
             totalLeft+=par.offsetLeft;
             totalTop+=par.offsetTop;
             par=par.offsetParent;
         }
         return {left:totalLeft,top:totalTop}
  }

js盒子模型中：
1.client系列/offset系列/scrollWidth/scrollHeight都是“只读”属性-》
只能通过属性获取值，不能通过属性修改元素的样式
2.scrollTop和scrollLeft:滚动条卷去的高度/宽度（这两个属性是唯一“可读写”属性）
box.scrollTop=0； ==>直接回到了容器顶部
我们的scrollTop的值是存在边界值的（最大值和最小值），我们设置的值比最小值小
或者比最大值大都没用，祈祷效果的依然是边界值 最小值为0 最大值是真实高度减去
当前容易一屏幕的高度
box.scrollTop=-1000; 直接回到了容器的顶部，没有超出
JS中的两种编程思想：同步和异步
JS是单线程-》只能做一件事情,没完成之前，绝对不会做下一件事情--------->同步(js中大部分都是同步编程)
for循环就是同步编程的，只有循环结束后，才会继续向下执行
2.异步编程：首先规划要做一件事情，但是不是当前立马去执行这件事情，需要等一定时间，这样的话，我们不会等着他执行，
而是继续执行下面的操作，只有当下面的事情处理完了，才会返回头处理之前的事情，如果下面的事情并没有处理完成，不管之前的事情有没有时间，都踏踏实实的等着
在JS中异步编程自由四种情况：定时器、所有的事件绑定、AJAX获取数据、回调函数