JavaScript学习Day19笔记

Day19笔记

一、getComputedStyle获取CSS属性

window.getComputedStyle(Ele,null).css属性名

二、SCROLL滚动事件

// 获取滚动条距离顶部的距离
document.documentElement.scrollTop
window.pageYOffset

// 获取滚动条距离左边的距离
document.documentElement.scrollLeft
window.pageXOffset

三、获取元素尺寸

offsetWidth和offsetHeight

获取的值为border + padding + content

clientWidth和clientHeight

获取的值为padding + content

offsetLeft、offsetTop和offsetParent

offsetParent  =>  距离该子元素最近的定位流父元素
// 若没有定位流父元素，offsetParent  =>  body
// bodyEle.offsetParent  =>  null

offsetLeft && offsetTop
// 获取元素的相对偏移量

四、获取浏览器窗口尺寸

window.innerWidth 和 window.innerHeight

获取浏览器窗口尺寸（包含滚动条尺寸）

document.documentElement.clientWidth 和 document.documentElement.clientHeight

获取文档尺寸（不包含滚动条尺寸）

五、事件对象event光标坐标点获取

clientX 和 clientY

相对浏览器窗口的坐标点

pageX 和 pageY

相对整个文档页面的坐标点

offsetX 和 offsetY

相对元素的坐标点

pointer-events:none

CSS属性 鼠标事件失效