DOM对象的常用属性

获取div宽高

元素.clientWidth 客户宽高
元素.clientHeight

元素.offsetWidth 偏移宽高
元素.offsetHeight

元素.scrollWidth 滚动宽高
元素.scrollHeight

以上所有的宽高，基于元素被加入到DOM渲染树后
也就是被添加在页面中以后，才可以获取
并且图片这类后加载元素无法获取宽高(异步原因造成)

异步 当运行某个需要一段时间完成的内容时、可以先继续向后执行代码，加载和执行后面是同时进行的
同步 上一步执行完成再执行下一步

元素的宽高

console.log(getComputedStyle(div).width) //50px-滚动条的宽高
console.log(div.clientWidth) 50 不加单位

console.log(div.clientWidth) width+padding-滚动条的宽高，不带边线（边框）
console.log(div.offsetWidth) width+padding+border 有没有滚动条跟它没有关系，就是实际这个div的占位宽高，带边线（边框）
console.log(div.scrollWidth)
如果没有超出 等同于clientWidth和clientHeight
如果超出就是实际内容所占的宽高，但是padding没有右侧和下侧
如果超出就是实际内容所占的宽高，但是padding没有右侧和下侧-(如果有滚动条，减去滚动条宽高)

body与html的宽高

// ————————————————————————————元素以外的宽高，页面宽高
// document.body body
// document.documentElement html

// console.log(document.body.clientWidth,document.body.clientHeight);//实际body的宽度和高度-滚动条宽高
// console.log(document.body.offsetWidth,document.body.offsetHeight);//实际body的宽度和高度-滚动条宽高
// console.log(document.body.scrollWidth,document.body.scrollHeight);//实际body中内容的宽高

// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight);//当前文档的可视宽高-(如果有滚动条，减去滚动条宽高)
// console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);//当前文档的内容宽高-(如果有滚动条，减去滚动条宽高)
// console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);//当前文档的可视宽高，如果有滚动条，就是实际body撑开的宽高

clientWidth/Height

//页面宽度-16（默认8个像素的宽度）   高度0（因为没有内容）如果有内容会撑开 
// 元素有多高，就会撑开多少 ，宽度是可视宽度
// console.log(document.body.clientWidth,document.body.clientHeight);


// 获取页面的可视宽高  ，并不会因为内容变大而撑开
// console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)

offsetWidth/Height

// body的offsetWidth和clientWidth相同
// console.log(document.body.offsetWidth,document.body.offsetHeight);

// 获取页面的可视宽度，高度是8 ，有内容，宽度仍然是可视宽度，html的高度是body内容高度+bodyMargin
// console.log(document.documentElement.offsetWidth,document.documentElement.offsetHeight);

scrollWidth/Height

    // 没有内容时和body的clientWidth相同，有内容，内容撑开的宽高，和clientHeight相同，内容宽度
    // console.log(document.body.scrollWidth,document.body.scrollHeight);


    // 如果没有body没有高度，则是可视宽高
    // 如果body有宽高，不超过可视宽高，则是可视宽高
    // 如果body的宽高超出可视范围，则是body宽高+margin(宽度+margin，高度+margin*2)
    // console.log(document.documentElement.scrollWidth,document.documentElement.scrollHeight);

最常用的

    // 1、内容高度 console.log(document.body.clientHeight);
    // 2、可视宽高 console.log(document.documentElement.clientWidth,document.documentElement.clientHeight)
    // 3、有滚动条时，内容宽高  console.log(document.body.scrollWidth,document.body.scrollHeight);

位置

    // clientLeft clientTop
    // offsetLeft offsetTop
    // scrollLeft scrollTop

元素的位置

clientLeft/Top

    //   var div1=document.getElementById("div1");
    //   边线宽高
    //   console.log(div1.clientLeft,div1.clientTop);

offsetLeft/Top

    // 没有定位时，相对页面的左上顶角位置
    // 如果定位 相对父容器左上角位置  和css中left，top相同
    // console.log(div1.offsetLeft,div1.offsetTop);

scrollLeft/Top

    // 是元素上的滚动条位置（元素已经向下滚动了多少/元素上去了多少，而不是滚动条的长度..）  仅这两个属性可以设置
    // console.log(div1.scrollLeft,div1.scrollTop);

                                可滚动页面的整体减去可视窗口的高度
    // div1.scrollTop=157;   // (div1.scrollHeight-div1.clientHeight)这个就是最大滚动位置,到底
    // console.log(div1.scrollHeight,div1.clientHeight);
    嫌麻烦可以直接设置为整个页面的整体高度 就到底了 这样不够准确
    // div1.scrollTop=div1.scrollHeight;


    // 操作滚动条触发执行函数
   /*  div1.onscroll=function(){
        console.log(div1.scrollTop);//获取滚动条位置
    } */


    // IE8以后才有的方法
    // 获取元素的矩形界限范围
    // var rect=div1.getBoundingClientRect();
    // console.log(rect);
  /*   {
        width,  //offsetWidth
        height, //offsetHeight
        left, //最左边到可视窗口的距离
        top, //最顶部到可视窗口的距离
        right,//left+width 最右边到可视窗口的距离
        bottom,//top+height  最下面到可视窗口的距离
        x, //left
        y  //top  
    } */

比较常用的

    // 元素的
    // 1、offsetLeft、offsetTop，定位后元素相对父容器的距离
    // 2、scrollLeft，scrollTop,元素内的滚动条位置
    // 3\ getBoundingClientRect()获取元素的矩形界限范围

html body位置

    // body 和 html没有边线，所有这两个值都是0
    // console.log(document.body.clientLeft,document.body.clientTop)
    // console.log(document.documentElement.clientLeft,document.documentElement.clientTop)

    // 因为body和html标签都是最顶端，最外层，这两个值都是0
    // console.log(document.body.offsetLeft,document.body.offsetTop)
    // console.log(document.documentElement.offsetLeft,document.documentElement.offsetTop)

    // document.body.scrollTop=100;
    // 页面中的滚动是html的scrollTop和scrollLeft控制
    // 早期的浏览器是body控制
    // document.documentElement.scrollTop=200;