JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍

offsetWidth//返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)

offsetHeight//返回元素的高度(包括元素高度、内边距和边框,不包括外边距)

clientWidth//返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)

clientHeight//返回元素的高度(包括元素高度、内边距,不包括边框和外边距)

style.width//返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)

style.height//返回元素的高度(包括元素高度,不包括内边距、边框和外边距)

scrollWidth//返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同

scrollHeigh//返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同


当鼠标事件发生时(不管是onclick,还是omousemove,onmouseover等)

clientX        鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标;  不随滚动条滚动而改变;

clientY        鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标;  不随滚动条滚动而改变;

pageX        鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标;  随滚动条滚动而改变;

pageY        鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标;  随滚动条滚动而改变;

screenX     鼠标相对于显示器屏幕左上角x轴的坐标;  

screenY      鼠标相对于显示器屏幕左上角y轴的坐标;  

offsetX        鼠标相对于事件源左上角X轴的坐标

offsetY        鼠标相对于事件源左上角Y轴的坐标


你可能感兴趣的:(JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍)