JS盒模型、偏移量_js 盒子向下位移80px-优快云博客

本文链接：https://blog.youkuaiyun.com/YoungFive_/article/details/92561854

博客重点介绍了JS相关知识，包括客户区大小在不同模式（标准、混杂、兼容）下的情况，偏移量（水平和垂直距离及定位影响），视口大小，获取事件源属性，鼠标偏移量以及获取标签宽度等内容。

重点内容：

offsetLift ： 目标元素距离浏览器的宽度   
offsetTop ：目标元素距离浏览器的高度

1、客户区大小：

盒子所占的宽度：clientWidth  : (width + padding)
盒子所占的高度：clientHeight : (height + padding)

标准模式下（IE9及以上）：

可视区宽度：document.documentElement.clientWidth (width=100%)
可视区高度：document.documentElement.clientHeight

混杂模式下（IE8以下）：

可视区宽度：document.body.clientWidth
可视区高度：document.body.clientHeight

一般应用中（兼容模式）：

var w : document.documentElement.clientWidth || document.body.clientWidth;
var h : document.documentElement.clientHeight || document.body.clientHeight;

2、偏移量：

盒子所占高度 ： offsetHeight ：height + padding + border
  client 和 offset 都是数值类型，  只能获取，不能设置。  
offsetLeft / offsetTop : 元素的偏移量

水平距离：元素距离浏览器左边的距离 offsetLeft
垂直距离：元素距离浏览器上边的距离 offsetTop
如果盒子有定位，父级元素也有定位的情况下，相对于有定位的父级元素的距离。

3、视口大小

window.innerWidth  : 浏览器视口的宽度
window.innerHeight  : 浏览器视口的高度

4、获取事件源的属性

target (非IE) ：获取当前事件的元素
srcElement（IE）：获取当前时间的元素

跨浏览器获取当前触发事件的元素：

var target = Event.srcElement ? Event.srcElement : event.target；

onpropertychange 事件是只要HTML元素属性发生改变时即可捕获到

5、鼠标偏移量

offsetX / offsetY : 鼠标距离当前目标元素的距离
pageX / pageY : 鼠标距离浏览器的距离（一般用这个，比较优化）
clientX / clientY : 鼠标距离视口的距离

6、获取标签的宽度

offsetWidth / clientWidth
offsetHeight / cliengHeight