offset 家族的组成
我们知道，三大家族包括：offset/scroll/client。今天来讲一下offset，以及与其相关的匀速动画。
offset的中文是：偏移，补偿，位移。
js中有一套方便的获取元素尺寸的办法就是offset家族。offset家族包括：
offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent
下面分别介绍。
1、offsetWidth 和 offsetHight
用于检测盒子自身的宽高+padding+border，不包括margin。如下：
offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;
这两个属性，他们绑定在了所有的节点元素上。获取之后，只要调用这两个属性，我们就能够获取元素节点的宽和高。
2、offsetLeft 和 offsetTop
返回距离上级盒子（带有定位）左边的位置；如果父级都没有定位，则以浏览器为准。
offsetLeft、offsetTop： 父元素的边框 + 父元素的内边距 + 元素的外边距
在父盒子有定位的情况下，offsetLeft == style.left(去掉px之后)。注意，后者只识别行内样式。但区别不仅仅于此，后面会讲。
3、offsetParent
检测父系盒子中带有定位的父盒子节点。返回结果是该对象的父级（带有定位）。
如果当前元素的父级元素，没有CSS定位（position为absolute、relative、fixed），那么offsetParent的返回结果为body。
如果当前元素的父级元素，有CSS定位（position为absolute、relative、fixed），那么offsetParent的返回结果为最近的那个父级元素。
offsetLeft和style.left区别
（1）最大区别在于：
offsetLeft 可以返回没有定位盒子的距离左侧的位置。如果父系盒子中都没有定位，以body为准。
style.left 只能获取行内式，如果没有，则返回""（意思是，返回空）;
（2）offsetTop 返回的是数字，而 style.top 返回的是字符串，而且还带有单位：px。
比如：
div.offsetLeft=100;
div.style.left="100px";
（3）offsetLeft 和 offsetTop 只读，而 style.left 和 style.top 可读写（只读是获取值，可写是赋值）
（4）如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
总结：我们一般的做法是：用offsetLeft 和 offsetTop 获取值，用style.left 和 style.top 赋值（比较方便）。理由如下：
style.left：只能获取行内式，获取的值可能为空，容易出现NaN。
offsetLeft：获取值特别方便，而且是现成的number，方便计算。它是只读的，不能赋值。
scroll 家族的组成
当我们用鼠标滚轮，滚动网页的时候，会触发window.onscroll()方法。效果如下：（注意看控制台的打印结果）
1、ScrollWidth 和 scrollHeight
获取盒子的宽高。调用者为节点元素。不包括 border和margin。如下：
scrollWidth = width + padding;
scrollHeight = height + padding;
scrollHeight有一个特点：如果文字超出了盒子，高度为内容的高（包括超出的内容）；不超出，则是盒子本身高度。
2、scrollTop 和 scrollLeft
网页被卷去的头部和左边的部分。
比如说，一个网页往上滚动的时候，上面的部分自然被浏览器遮挡了，遮挡的高度就是scrollTop。
scrollTop 这个属性的写法要注意兼容性。
最终版的兼容性写法：
window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;
将 scrollTop 和 scrollLeft封装为 json
将 scrollTop 和 scrollLeft封装为一个方法，名叫scroll()，返回值为 json。json里的键为 top 和 left。以后就直接调用json.top 和json.left就好。
JavaScript 错误 - Throw、Try 和 Catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
错误一定会发生
当 JavaScript 引擎执行 JavaScript 代码时，会发生各种错误：
可能是语法错误，通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然，也可能是由于许多其他不可预知的因素。
JavaScript 抛出错误
当错误发生时，当事情出问题时，JavaScript 引擎通常会停止，并生成一个错误消息。
描述这种情况的技术术语是：JavaScript 将抛出一个错误。
JavaScript 测试和捕捉
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
语法
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
实例
在下面的例子中，我们故意在 try 块的代码中写了一个错字。
catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="There was an error on this page.\n\n";
txt+="Error description: " + err.message + "\n\n";
txt+="Click OK to continue.\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="View message" onclick="message()">
</body>
</html>
Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
语法
throw _exception_
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
实例
本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息：
<script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") `throw "empty"`;
if(isNaN(x)) `throw "not a number"`;
if(x>10) `throw "too high"`;
if(x<5) `throw "too low"`;
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>
请注意，如果 getElementById 函数出错，上面的例子也会抛出一个错误。
