JavaScript网页特效

一、元素偏移量offset系列

1、offset概述

offset含义：offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。

属性	说明
offsetLeft	返回元素相对其带有定位的父元素左边框的偏移
offsetTop	返回元素相对其带有定位的元素上方的偏移父
offsetWidth	返回自身的宽度（包括padding、边框和内容区域的宽度）。注意返回数值不带单位
offsetHeight	返回自身的高度（包括padding、边框和内容区域的高度）。注意返回数值不带单位
offsetParent	返回作为该元素带有定位元素的父级元素（如果父级都没有定位则返回body）

获取鼠标位置：鼠标指针在盒子内的坐标位置示意图分析。

 2、offset与style的区别

Offset	style
offset可以得到任意样式表中的样式值	style只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding、border、width的值	style.width获得的是不包含padding、border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值

二、元素可视区client

1、client概述

client系列：client中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息

属性	说明
clientLeft	返回元素左边框的大小
clientTop	返回元素上边框的大小
clientWidth	返回自身的宽度（包含padding），内容区域的宽度（不含边框）。注意返回数值不带单位
clientHeight	返回自身的高度（包含padding），内容区域的高度（不含边框）。注意返回数值不带单位

获取元素client：

获取元素client代码实现：

<div>我是内容．．．</div>
<style>．．．（省略了样式代码）</style>
<script>
  var div = document.querySelector('div');
  console.log(div.clientHeight);console.log(div.clientTop);
  console.log(div.clientLeft);
</script>

 三、元素滚动scroll系列

1、scroll概述  

 scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。

属性	说明
scrollLeft	返回被卷去的左侧距离，返回数值不带单位
scrollTop	返回被卷去的上方距离，返回数值不带单位
scrollWidth	返回自身的宽度，不含边框。注意返回数值不带单位
scrollHeight	返回自身的高度，不含边框。注意返回数值不带单位

scrollHeight：返回自身的高度，不含边框。注意返回数值不带单位。

<style>
  …（省略了样式代码）
</style>
<div>我是内容…（省略重复内容）</div>
<script>
  var div = document.querySelector('div');
  console.log(div.scrollHeight);
</script>

scrollHeight：修改div元素的padding值为10px，查看scrollHeight的值。

<style>
  div{
    padding:10px;
  }
</style>