前端——css宽高备忘录_div 屏幕高度不包括任务栏-CSDN博客

本文链接：https://blog.csdn.net/helloyangkl/article/details/126588032

1. div.clientWidth     div.clientHeight
   只读，返回该元素的像素高宽，包含内边距（padding），不包含边框（border）
2. div.offsetHeight    div.offsettWidth 
   只读，返回该元素的像素高宽度，包含内边距（padding）和边框（border）以及元素的滚动条，不包含外边距（margin）
3.div.offsetLeft     div.offsetTop
   只读，返回该元素的left/top值
4.div.style.left      div.style.top 
   div.style['left']   div.style['top ']
   获取/设置 div的css的样式left与top 
5.getComputedStyle(div)
   只读，获取div的css样式对象
   getComputedStyle(div)['left']     getComputedStyle(div)['top'] 
   获取div的css样式left与top，带px


5.
鼠标在div的位置             event.offsetX     event.offsetY
鼠标在页面的位置            pageX             pageY
div的宽高                  div.offsetWidth   div.offsetHeight
divd绝对位置               div.style.left    div.style.top

1、关于Windows

window.screen.width、window.screen.height （返回屏幕的宽度、高度）
window.screen.availWidth、window.screen.availHeight （返回屏幕的宽度和高度（不包含任务栏））
window.screen.pixelDepth 返回屏幕的颜色分辨率（每象素的位数）
window.outerHeight、window.outerWidth 窗口的外部宽度（高度），包括所有界面元素（如工具栏/滚动条）
window.innerWidth、window.innerHeight 窗口的内部宽度与高度(不包含工具条与滚动条)
window.pageXOffset、window.pageYOffset 文档在窗口左上角水平和垂直方向滚动的像素
window.scrollX、window.scrollY 获取文档水平滚和垂直滚动的的像素数。IE不支持
window.screenX、window.screenY 窗口相对于屏幕的X和Y坐标。ie中window.screenLeft 和 window.screenTop获得相同的值但是浏览器计算方式不同，不使用

2、关于事件对象的

event.clientX、event.clientY 鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。
event.pageX、event.pageY 鼠标相对于文档的坐标。
event.offsetX、event.offsetY 鼠标相对于事件源元素（srcElement）的X,Y坐标，最早只有IE有，现在都支持。
event.screenX、event.screenY 鼠标相对于用户显示器屏幕左上角的X,Y坐标。

3、关于element

element.offsetHeight、element.offsetWidth 元素的可视宽高距离。
element.offsetLeft、element.offsetTop 返回当前元素左上角相对于 element.offsetParent 节点的左边界偏移的像素值(包含margin)。
element.clientTop、element.clientLeft 内容区域的左上角相对于整个元素左上角的位置,不包含padding，及borde值。
element.clientWidth、element.clientHeight 元素的宽度和高度，不包括边框。
element.scrollLeft、element.scrollTop 元素滚动的像素大小
element.scrollWidth、element.scrollHeight 表示整个内容区域的宽高，包括隐藏的部分。如果元素没有隐藏的部分，则相关的值应该等用于clientWidth和clientHeight。scrollHeight应该等用于scrollTop + clientHeight。