offset、client、scroll (width,height、left,top、X,Y)

offsetWidth、clientWidth、scrollWidth

div{
    width: 20px;
    height: 20px;
    padding: 10px;
    border: 5px solid #000080;
}
<script type="text/javascript">
   var div = document.querySelector("div");
   console.log(div.offsetWidth);
   console.log(div.clientWidth);
   console.log(div.scrollWidth);
  </script>

offset、client、scroll (width,height、left,top、X,Y)_第1张图片                                            在这里插入图片描述
offsetWidth: 元素的宽度(width+左右padding+左右border)
clientWidth: 元素内尺寸(width+左右padding)
scrollWidth: 实际宽度,包括已经超出盒子的内容的宽度
获取文档区宽度,高度:(body标签的宽高,不包括滚动条)
document.documentElement.scrollWidth
document.documentElement.scrollHeight

offsetTop: 元素相对于上一个具有定位属性的父级元素的距离
clientTop: 元素上边框的高度
scrollTop: 元素滚动条的高度(元素超出可视区域的内容高度)
获取浏览器的滚动条高度: document.documentElement.scrollTop


window对象属性:
window.innerWidth     浏览器文档区+滚动条宽度
window.innerHeight     浏览器文档区+滚动条高度
window.outerWidth      整个浏览器宽度
window.outerHeight     整个浏览器高度
window.screen.width     屏幕宽度(分辨率)
window.screen.height     屏幕高度(分辨率)


鼠标事件对象属性
ev.screenX      鼠标相对于屏幕左侧的距离
ev.clientX      鼠标相对于浏览器左侧的距离
ev.offsetX || ev.layerX      鼠标相对于事件源左侧的距离

你可能感兴趣的:(javascript)