offset 家族的組成
我們知道黄琼，三大家族包括：offset/scroll/client锥涕。今天來講一下offset请琳，以及與其相關(guān)的勻速動畫。
offset的中文是：偏移殊橙，補償辐宾，位移。
js中有一套方便的獲取元素尺寸的辦法就是offset家族膨蛮。offset家族包括：
offsetWidth
offsetHight
offsetLeft
offsetTop
offsetParent
下面分別介紹叠纹。
1、offsetWidth 和 offsetHight
用于檢測盒子自身的寬高+padding+border敞葛，不包括margin誉察。如下：
offsetWidth = width + padding + border;
offsetHeight = Height + padding + border;
這兩個屬性，他們綁定在了所有的節(jié)點元素上惹谐。獲取之后持偏，只要調(diào)用這兩個屬性，我們就能夠獲取元素節(jié)點的寬和高氨肌。
2鸿秆、offsetLeft 和 offsetTop
返回距離上級盒子（帶有定位）左邊的位置；如果父級都沒有定位怎囚，則以瀏覽器為準(zhǔn)卿叽。
offsetLeft、offsetTop： 父元素的邊框 + 父元素的內(nèi)邊距 + 元素的外邊距
在父盒子有定位的情況下桩了，offsetLeft == style.left(去掉px之后)附帽。注意，后者只識別行內(nèi)樣式井誉。但區(qū)別不僅僅于此蕉扮，后面會講。
3颗圣、offsetParent
檢測父系盒子中帶有定位的父盒子節(jié)點喳钟。返回結(jié)果是該對象的父級（帶有定位）屁使。
如果當(dāng)前元素的父級元素，沒有CSS定位（position為absolute奔则、relative蛮寂、fixed），那么offsetParent的返回結(jié)果為body易茬。
如果當(dāng)前元素的父級元素酬蹋，有CSS定位（position為absolute、relative抽莱、fixed）范抓，那么offsetParent的返回結(jié)果為最近的那個父級元素。
offsetLeft和style.left區(qū)別
（1）最大區(qū)別在于：
offsetLeft 可以返回沒有定位盒子的距離左側(cè)的位置食铐。如果父系盒子中都沒有定位匕垫，以body為準(zhǔn)。
style.left 只能獲取行內(nèi)式虐呻，如果沒有象泵，則返回""（意思是，返回空）;
（2）offsetTop 返回的是數(shù)字斟叼，而 style.top 返回的是字符串偶惠，而且還帶有單位：px。
比如：
div.offsetLeft=100;
div.style.left="100px";
（3）offsetLeft 和 offsetTop 只讀犁柜，而 style.left 和 style.top 可讀寫（只讀是獲取值洲鸠，可寫是賦值）
（4）如果沒有給 HTML 元素指定過 top 樣式，則style.top 返回的是空字符串馋缅。
總結(jié)：我們一般的做法是：用offsetLeft 和 offsetTop 獲取值扒腕，用style.left 和 style.top 賦值（比較方便）。理由如下：
style.left：只能獲取行內(nèi)式萤悴，獲取的值可能為空瘾腰，容易出現(xiàn)NaN。
offsetLeft：獲取值特別方便覆履，而且是現(xiàn)成的number蹋盆，方便計算。它是只讀的硝全，不能賦值栖雾。
scroll 家族的組成
當(dāng)我們用鼠標(biāo)滾輪，滾動網(wǎng)頁的時候伟众，會觸發(fā)window.onscroll()方法析藕。效果如下：（注意看控制臺的打印結(jié)果）
1、ScrollWidth 和 scrollHeight
獲取盒子的寬高凳厢。調(diào)用者為節(jié)點元素账胧。不包括 border和margin竞慢。如下：
scrollWidth = width + padding;
scrollHeight = height + padding;
scrollHeight有一個特點：如果文字超出了盒子，高度為內(nèi)容的高（包括超出的內(nèi)容）治泥；不超出筹煮，則是盒子本身高度。
2居夹、scrollTop 和 scrollLeft
網(wǎng)頁被卷去的頭部和左邊的部分败潦。
比如說，一個網(wǎng)頁往上滾動的時候吮播，上面的部分自然被瀏覽器遮擋了变屁，遮擋的高度就是scrollTop眼俊。
scrollTop 這個屬性的寫法要注意兼容性意狠。
最終版的兼容性寫法：
window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop;
將 scrollTop 和 scrollLeft封裝為 json
將 scrollTop 和 scrollLeft封裝為一個方法，名叫scroll()疮胖，返回值為 json环戈。json里的鍵為 top 和 left。以后就直接調(diào)用json.top 和json.left就好澎灸。
JavaScript 錯誤 - Throw院塞、Try 和 Catch
try 語句測試代碼塊的錯誤。
catch 語句處理錯誤性昭。
throw 語句創(chuàng)建自定義錯誤拦止。
錯誤一定會發(fā)生
當(dāng) JavaScript 引擎執(zhí)行 JavaScript 代碼時，會發(fā)生各種錯誤：
可能是語法錯誤糜颠，通常是程序員造成的編碼錯誤或錯別字汹族。
可能是拼寫錯誤或語言中缺少的功能（可能由于瀏覽器差異）。
可能是由于來自服務(wù)器或用戶的錯誤輸出而導(dǎo)致的錯誤其兴。
當(dāng)然顶瞒，也可能是由于許多其他不可預(yù)知的因素。
JavaScript 拋出錯誤
當(dāng)錯誤發(fā)生時元旬，當(dāng)事情出問題時榴徐，JavaScript 引擎通常會停止，并生成一個錯誤消息匀归。
描述這種情況的技術(shù)術(shù)語是：JavaScript 將拋出一個錯誤坑资。
JavaScript 測試和捕捉
try 語句允許我們定義在執(zhí)行時進(jìn)行錯誤測試的代碼塊。
catch 語句允許我們定義當(dāng) try 代碼塊發(fā)生錯誤時穆端，所執(zhí)行的代碼塊袱贮。
JavaScript 語句 try 和 catch 是成對出現(xiàn)的。
語法
try
? {
? //在這里運行代碼
? }
catch(err)
? {
? //在這里處理錯誤
? }
實例
在下面的例子中徙赢，我們故意在 try 塊的代碼中寫了一個錯字字柠。
catch 塊會捕捉到 try 塊中的錯誤探越，并執(zhí)行代碼來處理它。
<!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 語句允許我們創(chuàng)建自定義錯誤窑业。
正確的技術(shù)術(shù)語是：創(chuàng)建或拋出異常（exception）钦幔。
如果把 throw 與 try 和 catch 一起使用，那么您能夠控制程序流常柄，并生成自定義的錯誤消息鲤氢。
語法
throw _exception_
異常可以是 JavaScript 字符串西潘、數(shù)字卷玉、邏輯值或?qū)ο蟆?/p>
實例
本例檢測輸入變量的值。如果值是錯誤的喷市，會拋出一個異常（錯誤）相种。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 函數(shù)出錯寝并，上面的例子也會拋出一個錯誤。
