节点操作getComputedStyle offsetWidth & offsetHeight clientWidth

getComputedStyle

//获取并打印内容宽度
console.log(window.getComputedStyle(divDemo, null).width);
//同理 获取并打印了高度
console.log(window.getComputedStyle(divDemo, null).height);

offsetWidth & offsetHeight

//offsetWidth的宽度是根据 内容宽度+内边距(padding)+边框(border) 
console.log(divDemo.offsetWidth);
//offsetHeight的高度是根据 内容宽度+内边距(padding)+边框(border) 
console.log(divDemo.offsetHeight);

clientWidth & clientHeight

//clientWidth的宽度是根据内容宽度+内边距(padding)
console.log(divDemo.clientWidth);
//clientHeight的宽度是根据内容宽度+内边距(padding)
console.log(divDemo.clientHeight);

offsetLeft & offsetTop

//正常情况下 body的(margin-left)+divDemo的(margin-left)
//脱离文档流 divDemo的(left)+divDemo的(margin-left)
console.log(divDemo.offsetLeft);
//正常情况下 body的(margin-top)
//脱离文档流 divDemo的(top)+divDemo的(margin-top)
console.log(divDemo.offsetTop);

offsetParent

//offsetParent 相对于谁(父元素)偏移 控制台打印出父元素
//如果 offsetParent 的元素(divDemo2)的父元素(divDemo)没有进行定位
//那么offsetParent的元素(divDemo2)会根据body偏移
//divDemo.offsetParent 相对于body偏移
console.log(divDemo.offsetParent); //<body>...<body>
//divDemo2.offsetParent 相对于divDemo偏移
console.log(divDemo2.offsetParent); //<div id="divDemo">...</div>

获取滚动条距离顶部的距离

//点击执行函数
function getScroll() {
//获取滚动条距离顶部的高度
    console.log(document.documentElement.scrollTop);
}

滚动条事件

//实时的获取距离
//滚动条事件onscroll
//每当滚动 滚动条时 执行函数
document.onscroll = function () {
    console.log(document.documentElement.scrollTop);
};