9.5 js盒模型

标准浏览器盒模型的大小 ：

左border+padding+context+右padding+border

js盒模型

clientWidth:可视区宽度  包含width+padding  没有border

clientHeight ：可视区高度  包含height+padding  没有border   这两个获取的都是数字  不带单位  类型也是数字类型   而且和内容的高度宽度无关   撑开也没关系 前提是设置了高度   若没有  内容多会跟着变大

clientTop

clientLeft  分别代表上边框和左 边框    不存在clientBottom和clientRight

offsetWidth  相当于clientWidth+border  和内容也是无关 

offsetHeight = clientHeight+border

div垂直水平居中

  #box{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            position: fixed;
            top:50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

所以这种方法在不知道高度的情况下可以用js的方法  比如
oBox.style.marginHeight = -oBox.clientHeight/2+'px';

#box{
            background: rebeccapurple;
            width: 100px;
            height: 100px;
            position: absolute;
           top: 0;
           bottom: 0;
           left: 0;
           right: 0;
           margin: auto;
        }

盒子距离上一级有定位的元素的左边  上边  距离

如果一层层的父级都没有定位  就找浏览器

offsetLeft   offsetTop

offsetParent 参照物  指的其实就是带定位的距离最近的父级元素

封装offset函数

<script>
        var oBox = document.getElementById('small');
        function offset(box){
            var l = box.offsetLeft;
            var t = box.offsetTop;
            var p = box.offsetParent;
            while(p.tagName !== "BODY")
            {
                l+=p.clientLeft+p.offsetLeft;
                t+=p.clientTop+p.offsetTop;
                p=p.offsetParent; 
            }
           return{
               left:l,
               top:t,
           }
           
        }
        console.log(offset(oBox))
    </script>

获取浏览器可视区的宽度和高度

var winH = document.documentElement.clientHeight|| document.body.clientHeight;

var winW = document.documentElement.clientWidth||document.body.clientWidth;

 

scroll属性（获取元素的滚动区域的宽度和高度）

scrollWidth

scrollHeight  在内容没有超出时 高度就是高度  scrollHeight = Height+padding 

   内容超出时 就是 scrollHeight =内容的Height 

内容超出但是设置了溢出隐藏 scrollHHeight  = 内容的Height+下边的padding

overflow：auto会出现滚动轴  高度增加

scrollLeftt

scrollTop 滚动轴竖向和横向的  距离边界

以上讲的只有scrollLeft和scrollTop可以赋值 其他的都不可

获取css样式

window.getComputedStyle(document.body).height

window.getComputedStyle(document.body,null).height  标准浏览器下的属性getComputedStyle

不标准下   

document.body.currentStyle

document.body.currentStyle['width']

兼容

function getCss(box,params){
            if('getComputedStyle' in window)
            {
                return window.getComputedStyle(box,null)[params]
            }
            else
            {
                return box.currentStyle[params]
            }
        } 
        console.log(getCss(box,'width'))

设置css和批量设置

    function setCss(box,params,value){
            box.style[params]=value;
        }
        setCss(box,'background','green');
        function setAllCss(box,obj)
        {
            for(var key in obj)
            {
                box.style[key]= obj[key];
            }
        }
        setAllCss(box,{
            'color':'red',
            'font-size':'20px'
        })