DOM盒模型的各种width和height属性

client系列(和内容是否溢出盒子无关)

  1. clientWidth:内容的宽度+左右padding
  2. clientHeight:内容的高度+上下padding
  3. clientLeft:左边框的宽度(border-left-width)
  4. clientTop:上边框的宽度(border-top-width)

offset系列(和内容是否溢出盒子无关)

  1. offsetWidth:clientWidth+左右边框
  2. offsetHeight:clientHeight+上下边框
  3. offsetLeft:子元素的外边框相对于父定位元素(没有则指向body)的内边框的偏移量
  4. offsetTop:子元素的外边框相对于父定位元素(没有则指向body)的内边框的偏移量
  5. offsetParent: 指向子元素的定位父元素,如果没有就指向body,body指向null。

scroll系列

  1. scrollWidth:当内容未溢出容器时等于clientWidth.当溢出时是真实宽度+左右padding
  2. scrollHeight:当内容未溢出容器时等于clientHeight。当溢出时是真实高度+上下padding
  3. scrollTop:滚动条卷去的高度
  4. scrollLeft:滚动条卷去的宽度
    注:如果设置了overflow:hidden;各浏览器结果不同。

取值问题

我们通过这13个属性获取的都是近似的整数。

浏览器的盒模型

  1. 对于浏览器而言,clientWidth/clientHeight是当前浏览器可视窗口的宽高(一屏幕的宽高)
  2. 对于浏览器而言,scrollWidth/scrollHeight是当前页面的真实宽高(所有屏加起来宽高的近似值)

浏览器盒模型属性获取/设置方法的封装

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

获取某元素相对浏览器的偏移量 方法的封装

function offset (curEle) {
    var l=curEle.offsetLeft;
    var t=curEle.offsetTop;
    var par=curEle.offsetParent;
    //一层层定位祖先向上累加
    while (par) {
        if (window.navigator.userAgent.indexOf('MSIE 8.0')!==-1) {
                l+=par.clientLeft;
                t+=par.clientTop;
        }
        l+=par.offsetLeft;
        t+=par.offsetTop;
        par=par.offsetParent;
    }
    return {left:l,top:t};
}

计算后的样式值的获取

一般我们用 元素.style.样式来获取元素的样式。这样获取到的是元素的行内样式。如果想获取元素经过计算后的样式需要使用window.getComputedStyle(ele,null);
经过浏览器计算过的样式是指 只要当前标签可以在浏览器中呈现出来,那么他所有样式都是经过浏览器计算过的,哪怕那些样式你没有写也可以获取到。
window.getComputedStyle(box,null)接收两个参数。 box指要获取样式的元素,null指伪类。

获取计算后样式的 方法封装

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

你可能感兴趣的:(DOM盒模型的各种width和height属性)