DOM盒子模型

css盒子模型

DOM盒子模型

通过js提供的一些方法获取页面中的样式信息，下面就是我们获取样式信息的一系列方法

计算联合样式

内容的宽度和高度：我们设置的width/height这两个样式就是内容的宽和高；如果没有设置height，容器的高度会根据里面内容自己进行适应，这样获取的值就是真实内容的高；如果设置固定高度，不管内容是多了还是少了，其实我们的内容高度指的都是设定的那个值；

真实内容的宽和高：这个指的是实际内容的宽高（和我们设置的width和height没有必然的联系），例如我们设置的高度为200px，如果内容有溢出，那么真实的内容高度是要把溢出的内容也要加进来的。

• client系列（4个）

clientWidth：内容的宽度+左右填充高度

clientHeight：内容的高度+上下填充（上下填充指的是padding值）

clientLeft:左边框的宽度

clientTop:上边框的高度

clientWidth和clientHeight与内容溢出没关系

•  offset系列(5个)

 offsetWidth:clientWidth+左右边框（border）

offsetHeight:clientHeight+上下边框

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

在同一个平面上，最外层的元素是里面所有元素的父级参照物（和HTML层级结构没有必然的联系）

一般来说，一个页面中所有元素的父级参照物都是body

想要改变父级参照物需要通过position定位来进行改变

position:absolute;

position:relative;

position:fixed;

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

获取元素距离body的偏移量的封装方法：

function offset(curEle) {
    var totalLeft = null,
        totalTop = null,
        par = curEle.offsetParent;
    totalLeft += curEle.offsetLeft;
    totalTop += curEle.offsetTop;
    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}
}

• scroll系列(4个)

scrollWidth和scrollHeight在内容没有溢出的情况下和 clientWidth和clientHeight相等

在内容有溢出的情况下：

scrollWidth:真实内容的宽度（包含溢出）+左padding

scrollHeight:真实内容的高度（包含溢出）+上padding

scrollWidth和scrollHeight的值是约值，同一个浏览器是否设置overflow='hidden'对于最终设置的结果是有影响的，同时也受浏览器的影响。

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

以上所有的属性都是只读的，只有scrolleLeft和scrollHeight是可读写的

box.scrollTop = 0;//回到顶部

scrollTop计算过的值最小值是0，最大值是(box.scrollHeight-box.cliernHeight)

滚动条缓慢回到顶部的封装函数：

function(){
    var target = document.documentElement.scrollTop || document.body.scrollTop,
        interval = 10,
        duration = 500,
        step = (target/duration)*interval;
    var timer = window.setInterval(function () {
        var curTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(curTop <0 || curTop ===0){
            window.clearInterval(timer)
            return;
        }
        curTop -= step;
        document.documentElement.scrollTop = curTop;
        document.body.scrollTop = curTop;
    },interval)
}

小知识点：

• 我们通过以上13个属性获取的值不可能是小数，浏览器或自动四舍五入
• 浏览器的一些常见属性

clientWidth和clientHeight是当前浏览器可视窗口（一屏幕）的宽度和高度

scrollWidth和scrollHeight是当前的真是宽度和高度（所有屏加起来的宽度和高度），但是是一个约值

在浏览器中获取属性要考虑兼容，不管获取还是设置，都要写两套

document.documentElement[attr] || document.body[attr]

编写一个有关于操作浏览器盒子模型的方法

function win(attr,value){
    //如果参数没有value则是获取属性值，如果有value则是给属性赋值
    if(typeof value === 'undefined'){
        return document.documentElement[attr] || document.body[attr];
    }
    document.documentElement[attr] = value;
    document.body[attr] = value;
}

实例跑马灯效果

//跑马灯效果
~function () {
    var box = document.getElementById('box'),
        p = box.getElementsByTagName('p')[0];
    var pWidth = window.getComputedStyle(p,null).width;
    function move() {
        box.scrollLeft++;
        //当scrollLeft比P的宽度大时说明文字已经滚动完了，需要回到开头了
        if(box.scrollLeft >= parseInt(pWidth)){
            box.scrollLeft = 0;
        }
    }
    var timer = window.setInterval(move,10)
    box.onmouseover = function () {
        window.clearInterval(timer);
    }
    box.onmouseout = function () {
        timer = window.setInterval(move,10)
    }
}()

计算元素的某一个具体样式

• content.style.xxx

只能获取行内样式

• window.getComputedStyle(元素对象,当前元素的伪类);没有伪类传值null

 得到经过浏览器计算过后的样式，即使没有写的样式也会有

在IE6~8下不兼容，因为没有window.getComputedStyle这个属性

IE下获取元素样式的方法:

content.currentStyle;//content为当前的元素对象

封装处理兼容的方法：

方法一：使用try/catch方法

使用这种方法前提是确保在不兼容是会报错；而且使用这种方法无论是否兼容，try中的代码都会执行一遍

function getCss(curEle,attr){
    //curEle为当前元素.attr为要获取的样式属性
    try{
        return window.getComputedStyle(curEle,null)[attr];
    }catch (e){
        return curEle.currentStyle[attr]
    }
}

 

方法二：判断当前浏览器中是否存在这在属性和方法

function getCss(curEle,attr){
    //也可写 'getComputedStyle' in window
    if(window.getComputedStyle()){
        return window.getComputedStyle(curEle,null)[attr];
    }else{
        return curEle.currentStyle[attr];
    }
}

 

方法三：判断浏览器类型

function getCss(curEle,attr){
    if(/MSIE(6|7|8)/.test(navigator.userAgent)){
        return curEle.currentStyle[attr];
    }else{
        return window.getComputedStyle(curEle,null)[attr];
    }
}