JavaScript初見
警告alert()
確認(rèn)confirm()
提問prompt()
空格
JavaScript-打開新窗口（window.open）
open() 方法可以查找一個已經(jīng)存在或者新建的瀏覽器窗口。
語法：
window.open([URL], [窗口名稱], [參數(shù)字符串])
參數(shù)說明:
URL：可選參數(shù)，在窗口中要顯示網(wǎng)頁的網(wǎng)址或路徑。如果省略這個參數(shù)，或者它的值是空字符串，那么窗口就不顯示任何文檔。
窗口名稱：可選參數(shù)，被打開窗口的名稱。
1.該名稱由字母、數(shù)字和下劃線字符組成。
2."_top"、"_blank"、"_self"具有特殊意義的名稱。
_blank：在新窗口顯示目標(biāo)網(wǎng)頁
_self：在當(dāng)前窗口顯示目標(biāo)網(wǎng)頁
_top：框架網(wǎng)頁中在上部窗口中顯示目標(biāo)網(wǎng)頁
3.相同 name 的窗口只能創(chuàng)建一個，要想創(chuàng)建多個窗口則 name 不能相同。
4.name 不能包含有空格。
參數(shù)字符串：可選參數(shù)，設(shè)置窗口參數(shù)，各參數(shù)用逗號隔開。
參數(shù)表:
例如:打開http://www.imooc.com網(wǎng)站，大小為300px * 200px，無菜單，無工具欄，無狀態(tài)欄，有滾動條窗口：
<script type="text/javascript"> window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
3.
JavaScript-關(guān)閉窗口（window.close）
close()關(guān)閉窗口
用法：
window.close(); //關(guān)閉本窗口
或
<窗口對象>.close(); //關(guān)閉指定的窗口
例如:關(guān)閉新建的窗口。
<script type="text/javascript">
var mywin=window.open('http://www.imooc.com'); //將新打的窗口對象，存儲在變量mywin中
mywin.close();
</script>
4.
innerHTML 屬性
innerHTML 屬性用于獲取或替換 HTML 元素的內(nèi)容。
語法:
Object.innerHTML
注意:
1.Object是獲取的元素對象，如通過document.getElementById("ID")獲取的元素。
2.注意書寫，innerHTML區(qū)分大小寫。
5.
改變 HTML 樣式
HTML DOM 允許 JavaScript 改變 HTML 元素的樣式。如何改變 HTML 元素的樣式呢？
語法:
Object.style.property=new style;
注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
基本屬性表（property）:
6.
顯示和隱藏（display屬性）
網(wǎng)頁中經(jīng)常會看到顯示和隱藏的效果，可通過display屬性來設(shè)置。
語法：
Object.style.display = value
注意:Object是獲取的元素對象，如通過document.getElementById("id")獲取的元素。
value取值:
7.
控制類名（className 屬性）
className 屬性設(shè)置或返回元素的class 屬性。
語法：
object.className = classname
作用:
1.獲取元素的class 屬性
2. 為網(wǎng)頁內(nèi)的某個元素指定一個css樣式來更改該元素的外觀
<body>
<p id="p1" > JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>
<input type="button" value="添加樣式" onclick="add()"/>
<p id="p2" class="one">JavaScript使網(wǎng)頁顯示動態(tài)效果并實現(xiàn)與用戶交互功能。</p>
<input type="button" value="更改外觀" onclick="modify()"/>
<script type="text/javascript">
function add(){
var p1 = document.getElementById("p1");
p1.className = "one";
}
function modify(){
var p2 = document.getElementById("p2");
p2.className = "two";
}
</script>
</body>
JS進(jìn)階
什么是事件
JavaScript 創(chuàng)建動態(tài)頁面。事件是可以被 JavaScript 偵測到的行為。 網(wǎng)頁中的每個元素都可以產(chǎn)生某些可以觸發(fā) JavaScript 函數(shù)或程序的事件。
比如說，當(dāng)用戶單擊按鈕或者提交表單數(shù)據(jù)時，就發(fā)生一個鼠標(biāo)單擊（onclick）事件，需要瀏覽器做出處理，返回給用戶一個結(jié)果。
主要事件表:
鼠標(biāo)經(jīng)過事件（onmouseover）
鼠標(biāo)經(jīng)過事件，當(dāng)鼠標(biāo)移到一個對象上時，該對象就觸發(fā)onmouseover事件，并執(zhí)行onmouseover事件調(diào)用的程序。
鼠標(biāo)移開事件（onmouseout）
鼠標(biāo)移開事件，當(dāng)鼠標(biāo)移開當(dāng)前對象時，執(zhí)行onmouseout調(diào)用的程序。
光標(biāo)聚焦事件（onfocus）
當(dāng)網(wǎng)頁中的對象獲得聚點時，執(zhí)行onfocus調(diào)用的程序就會被執(zhí)行。
失焦事件（onblur）
onblur事件與onfocus是相對事件，當(dāng)光標(biāo)離開當(dāng)前獲得聚焦對象的時候，觸發(fā)onblur事件，同時執(zhí)行被調(diào)用的程序。
內(nèi)容選中事件（onselect）
選中事件，當(dāng)文本框或者文本域中的文字被選中時，觸發(fā)onselect事件，同時調(diào)用的程序就會被執(zhí)行。
文本框內(nèi)容改變事件（onchange）
通過改變文本框的內(nèi)容來觸發(fā)onchange事件，同時執(zhí)行被調(diào)用的程序。
加載事件（onload）
事件會在頁面加載完成后，立即發(fā)生，同時執(zhí)行被調(diào)用的程序。
注意：1. 加載頁面時，觸發(fā)onload事件，事件寫在<body>標(biāo)簽內(nèi)。
2. 此節(jié)的加載頁面，可理解為打開一個新頁面時。
如下代碼,當(dāng)加載一個新頁面時，彈出對話框“加載中，請稍等…”。
卸載事件（onunload）
當(dāng)用戶退出頁面時（頁面關(guān)閉、頁面刷新等），觸發(fā)onUnload事件，同時執(zhí)行被調(diào)用的程序。
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您確定離開該網(wǎng)頁嗎？");
}
</script>
Date 日期對象
日期對象可以儲存任意一個日期，并且可以精確到毫秒數(shù)（1/1000 秒）。
定義一個時間對象 :
var Udate=new Date();
注意:使用關(guān)鍵字new，Date()的首字母必須大寫。
使 Udate 成為日期對象，并且已有初始值：當(dāng)前時間(當(dāng)前電腦系統(tǒng)時間)。
如果要自定義初始值，可以用以下方法：
var d = new Date(2012, 10, 1); //2012年10月1日
var d = new Date('Oct 1, 2012'); //2012年10月1日
我們最好使用下面介紹的“方法”來嚴(yán)格定義時間。
訪問方法語法：“<日期對象>.<方法>”
Date對象中處理時間和日期的常用方法：
返回星期方法
getDay() 返回星期，返回的是0-6的數(shù)字，0 表示星期天。如果要返回相對應(yīng)“星期”，通過數(shù)組完成
Math對象
Math對象，提供對數(shù)據(jù)的數(shù)學(xué)計算。
注意：Math 對象是一個固有的對象，無需創(chuàng)建它，直接把 Math 作為對象使用就可以調(diào)用其所有屬性和方法。這是它與Date,String對象的區(qū)別。
Math 對象屬性
Math 對象方法
向上取整ceil()
ceil() 方法可對一個數(shù)進(jìn)行向上取整。
語法:
Math.ceil(x)
向下取整floor()
floor() 方法可對一個數(shù)進(jìn)行向下取整。
語法:
Math.floor(x)
四舍五入round()
round() 方法可把一個數(shù)字四舍五入為最接近的整數(shù)。
語法:
Math.round(x)
隨機(jī)數(shù) random()
random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之間的一個隨機(jī)數(shù)。
語法：
Math.random();
Array 數(shù)組對象
數(shù)組對象是一個對象的集合，里邊的對象可以是不同類型的。數(shù)組的每一個成員對象都有一個“下標(biāo)”，用來表示它在數(shù)組中的位置，是從零開始的
數(shù)組定義的方法：
1. 定義了一個空數(shù)組:
var 數(shù)組名= new Array();
數(shù)組方法：
指定分隔符連接數(shù)組元素join()
join()方法用于把數(shù)組中的所有元素放入一個字符串。元素是通過指定的分隔符進(jìn)行分隔的。
語法：
arrayObject.join(分隔符),省略則用‘，’分割
返回一個字符串，該字符串把數(shù)組中的各個元素串起來，用<分隔符>置于元素與元素之間。這個方法不影響數(shù)組原本的內(nèi)容。
顛倒數(shù)組元素順序reverse()
reverse() 方法用于顛倒數(shù)組中元素的順序。
語法：
arrayObject.reverse()
注意：該方法會改變原來的數(shù)組，而不會創(chuàng)建新的數(shù)組。
字符串分割split()
知識講解：
split() 方法將字符串分割為字符串?dāng)?shù)組，并返回此數(shù)組。
語法：
stringObject.split(separator,limit)
參數(shù)說明:
注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每個字符之間都會被分割。
選定元素slice()
slice() 方法可從已有的數(shù)組中返回選定的元素。
語法
arrayObject.slice(start,end)
參數(shù)說明：
1.返回一個新的數(shù)組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素。
2. 該方法并不會修改數(shù)組，而是返回一個子數(shù)組。
注意：
1. 可使用負(fù)值從數(shù)組的尾部選取元素。
2.如果 end 未被規(guī)定，那么 slice() 方法會選取從 start 到數(shù)組結(jié)尾的所有元素。
3. String.slice() 與 Array.slice() 相似。
數(shù)組排序sort()
sort()方法使數(shù)組中的元素按照一定的順序排列。
語法:
arrayObject.sort(方法函數(shù))
參數(shù)說明：
1.如果不指定<方法函數(shù)>，則按unicode碼順序排列。
2.如果指定<方法函數(shù)>，則按<方法函數(shù)>所指定的排序方法排序。
myArray.sort(sortMethod);
注意: 該函數(shù)要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個參數(shù) a 和 b，其返回值如下：
若返回值<=-1，則表示 A 在排序后的序列中出現(xiàn)在 B 之前。
若返回值>-1 && <1，則表示 A 和 B 具有相同的排序順序。
若返回值>=1，則表示 A 在排序后的序列中出現(xiàn)在 B 之后。
<script type="text/javascript">
function sortNum(a,b) {
return a - b;
//升序，如降序，把“a - b”該成“b - a”
}
</script>
window對象
window對象是BOM的核心，window對象指當(dāng)前的瀏覽器窗口。
window對象方法:
注意:在JavaScript基礎(chǔ)篇中，已講解了部分屬性，window對象重點講解計時器。
打開一個新窗口：
function openwin(){
window.open('http://www.imooc.com','_blank','height=600,width=400,top=100,toolbar=no,left=0,menubar=no,scrollbars=no,status=no');}
JavaScript 計時器
在JavaScript中，我們可以在設(shè)定的時間間隔之后來執(zhí)行代碼，而不是在函數(shù)被調(diào)用后立即執(zhí)行。
計時器類型：
一次性計時器：僅在指定的延遲時間之后觸發(fā)一次。
間隔性觸發(fā)計時器：每隔一定的時間間隔就觸發(fā)一次。
計時器方法：
計時器setInterval()
在執(zhí)行時,從載入頁面后每隔指定的時間執(zhí)行代碼。
語法:
setInterval(代碼,交互時間);
參數(shù)說明：
1. 代碼：要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 交互時間：周期性執(zhí)行或調(diào)用表達(dá)式之間的時間間隔，以毫秒計（1s=1000ms）。
返回值:
一個可以傳遞給 clearInterval() 從而取消對"代碼"的周期性執(zhí)行的值。
調(diào)用函數(shù)格式(假設(shè)有一個clock()函數(shù)):
setInterval("clock()",1000)
或
setInterval(clock,1000)
取消計時器clearInterval()
clearInterval() 方法可取消由 setInterval() 設(shè)置的交互時間。
語法：
clearInterval(id_of_setInterval)
參數(shù)說明:
id_of_setInterval：由 setInterval() 返回的 ID 值。
計時器setTimeout()
setTimeout()計時器，在載入后延遲指定時間后,去執(zhí)行一次表達(dá)式,僅執(zhí)行一次。
語法:
setTimeout(代碼,延遲時間);
參數(shù)說明：
1. 要調(diào)用的函數(shù)或要執(zhí)行的代碼串。
2. 延時時間：在執(zhí)行代碼前需等待的時間，以毫秒為單位（1s=1000ms)。
取消計時器clearTimeout()
setTimeout()和clearTimeout()一起使用，停止計時器。
語法:
clearTimeout(id_of_setTimeout)
參數(shù)說明:
id_of_setTimeout：由 setTimeout() 返回的 ID 值。該值標(biāo)識要取消的延遲執(zhí)行代碼塊。
History 對象
history對象記錄了用戶曾經(jīng)瀏覽過的頁面(URL)，并可以實現(xiàn)瀏覽器前進(jìn)與后退相似導(dǎo)航的功能。
注意:從窗口被打開的那一刻開始記錄，每個瀏覽器窗口、每個標(biāo)簽頁乃至每個框架，都有自己的history對象與特定的window對象關(guān)聯(lián)。
語法：
window.history.[屬性|方法]
注意：window可以省略。
History 對象屬性
History 對象方法
返回前一個瀏覽的頁面
back()方法，加載 history 列表中的前一個 URL。
語法：
window.history.back();
比如，返回前一個瀏覽的頁面，代碼如下：
window.history.back();
注意：等同于點擊瀏覽器的倒退按鈕。
back()相當(dāng)于go(-1),代碼如下:
window.history.go(-1);
返回下一個瀏覽的頁面
forward()方法，加載 history 列表中的下一個 URL。
如果倒退之后，再想回到倒退之前瀏覽的頁面，則可以使用forward()方法,代碼如下:
window.history.forward();
注意：等價點擊前進(jìn)按鈕。
forward()相當(dāng)于go(1),代碼如下:
window.history.go(1);
返回瀏覽歷史中的其他頁面
go()方法，根據(jù)當(dāng)前所處的頁面，加載 history 列表中的某個具體的頁面。
語法：
window.history.go(number);
參數(shù)：
Location對象
location用于獲取或設(shè)置窗體的URL，并且可以用于解析URL。
語法:
location.[屬性|方法]
location對象屬性圖示:
location 對象屬性：
location 對象方法:
Navigator對象
Navigator 對象包含有關(guān)瀏覽器的信息，通常用于檢測瀏覽器與操作系統(tǒng)的版本。
對象屬性:
userAgent
返回用戶代理頭的字符串表示(就是包括瀏覽器版本信息等的字符串)
語法
navigator.userAgent
var u_agent = navigator.userAgent; ;
var B_name="瀏覽器!";
if(u_agent.indexOf("Firefox")>-1){
B_name="Firefox";
}else if(u_agent.indexOf("Chrome")>-1){
B_name="Chrome";
screen對象
screen對象用于獲取用戶的屏幕信息。
語法：
window.screen.屬性
對象屬性:
屏幕分辨率的高和寬
window.screen 對象包含有關(guān)用戶屏幕的信息。
1. screen.height 返回屏幕分辨率的高
2. screen.width 返回屏幕分辨率的寬
注意:
1.單位以像素計。
屏幕可用高和寬度
1. screen.availWidth 屬性返回訪問者屏幕的寬度，以像素計，減去界面特性，比如任務(wù)欄。
2. screen.availHeight 屬性返回訪問者屏幕的高度，以像素計，減去界面特性，比如任務(wù)欄。
注意:
不同系統(tǒng)的任務(wù)欄默認(rèn)高度不一樣，及任務(wù)欄的位置可在屏幕上下左右任何位置，所以有可能可用寬度和高度不一樣。
認(rèn)識DOM
文檔對象模型DOM（Document Object Model）定義訪問和處理HTML文檔的標(biāo)準(zhǔn)方法。DOM 將HTML文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)（節(jié)點樹）。
先來看看下面代碼:
將HTML代碼分解為DOM節(jié)點層次圖:
HTML文檔可以說由節(jié)點構(gòu)成的集合，DOM節(jié)點有:
1. 元素節(jié)點：上圖中<html>、<body>、<p>等都是元素節(jié)點，即標(biāo)簽。
2. 文本節(jié)點:向用戶展示的內(nèi)容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 屬性節(jié)點:元素屬性，如<a>標(biāo)簽的鏈接屬性。
節(jié)點屬性:
遍歷節(jié)點樹:
以上圖ul為例，它的父級節(jié)點body,它的子節(jié)點3個li,它的兄弟結(jié)點h2、P。
DOM操作:
注意:前兩個是document方法。
getElementsByName()方法
返回帶有指定名稱的節(jié)點對象的集合。
語法：
document.getElementsByName(name)
與getElementById() 方法不同的是，通過元素的 name 屬性查詢元素，而不是通過 id 屬性。
注意:
1. 因為文檔中的 name 屬性可能不唯一，所有 getElementsByName() 方法返回的是元素的數(shù)組，而不是一個元素。
2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，從0開始。
getElementsByTagName()方法
返回帶有指定標(biāo)簽名的節(jié)點對象的集合。返回元素的順序是它們在文檔中的順序。
語法:
document.getElementsByTagName(Tagname)
說明:
1. Tagname是標(biāo)簽的名稱，如p、a、img等標(biāo)簽名。
2. 和數(shù)組類似也有l(wèi)ength屬性，可以和訪問數(shù)組一樣的方法來訪問，所以從0開始。
區(qū)別getElementByID,getElementsByName,getElementsByTagName
以人來舉例說明，人有能標(biāo)識身份的身份證，有姓名，有類別(大人、小孩、老人)等。
1. ID 是一個人的身份證號碼，是唯一的。所以通過getElementById獲取的是指定的一個人。
2. Name 是他的名字，可以重復(fù)。所以通過getElementsByName獲取名字相同的人集合。
3. TagName可看似某類，getElementsByTagName獲取相同類的人集合。如獲取小孩這類人，getElementsByTagName("小孩")。
把上面的例子轉(zhuǎn)換到HTML中，如下:
<input type="checkbox" name="hobby" id="hobby1"> 音樂
input標(biāo)簽就像人的類別。
name屬性就像人的姓名。
id屬性就像人的身份證。
方法總結(jié)如下:
getAttribute()方法
通過元素節(jié)點的屬性名稱獲取屬性的值。
語法：
elementNode.getAttribute(name)
說明:
1. elementNode：使用getElementById()、getElementsByTagName()等方法，獲取到的元素節(jié)點。
2. name：要想查詢的元素節(jié)點的屬性名字
setAttribute()方法
setAttribute() 方法增加一個指定名稱和值的新屬性，或者把一個現(xiàn)有的屬性設(shè)定為指定的值。
語法：
elementNode.setAttribute(name,value)
說明：
1.name: 要設(shè)置的屬性名。
2.value: 要設(shè)置的屬性值。
注意：
1.把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性，該方法將創(chuàng)建一個新屬性。
2.類似于getAttribute()方法，setAttribute()方法只能通過元素節(jié)點對象調(diào)用的函數(shù)。
節(jié)點屬性
在文檔對象模型 (DOM) 中，每個節(jié)點都是一個對象。DOM 節(jié)點有三個重要的屬性 ：
1. nodeName : 節(jié)點的名稱
2. nodeValue ：節(jié)點的值
3. nodeType ：節(jié)點的類型
一、nodeName 屬性: 節(jié)點的名稱，是只讀的。
1. 元素節(jié)點的 nodeName 與標(biāo)簽名相同
2. 屬性節(jié)點的 nodeName 是屬性的名稱
3. 文本節(jié)點的 nodeName 永遠(yuǎn)是 #text
4. 文檔節(jié)點的 nodeName 永遠(yuǎn)是 #document
二、nodeValue 屬性：節(jié)點的值
1. 元素節(jié)點的 nodeValue 是 undefined 或 null
2. 文本節(jié)點的 nodeValue 是文本自身
3. 屬性節(jié)點的 nodeValue 是屬性的值
三、nodeType 屬性: 節(jié)點的類型，是只讀的。以下常用的幾種結(jié)點類型:
元素類型 節(jié)點類型
元素 1
屬性 2
文本 3
注釋 8
文檔 9
訪問子節(jié)點childNodes
訪問選定元素節(jié)點下的所有子節(jié)點的列表，返回的值可以看作是一個數(shù)組，他具有l(wèi)ength屬性。
語法：
elementNode.childNodes
注意：
如果選定的節(jié)點沒有子節(jié)點，則該屬性返回不包含節(jié)點的 NodeList。
訪問父節(jié)點parentNode
獲取指定節(jié)點的父節(jié)點
語法：
elementNode.parentNode
注意:父節(jié)點只能有一個。
訪問兄弟節(jié)點
1. nextSibling 屬性可返回某個節(jié)點之后緊跟的節(jié)點（處于同一樹層級中）。
語法：
nodeObject.nextSibling
說明：如果無此節(jié)點，則該屬性返回 null。
2. previousSibling 屬性可返回某個節(jié)點之前緊跟的節(jié)點（處于同一樹層級中）。
語法：
nodeObject.previousSibling
說明：如果無此節(jié)點，則該屬性返回 null。
注意: 兩個屬性獲取的是節(jié)點。Internet Explorer 會忽略節(jié)點間生成的空白文本節(jié)點（例如，換行符號），而其它瀏覽器不會忽略。
插入節(jié)點appendChild()
在指定節(jié)點的最后一個子節(jié)點列表之后添加一個新的子節(jié)點。
語法:
appendChild(newnode)
參數(shù):
newnode：指定追加的節(jié)點。
插入節(jié)點insertBefore()
insertBefore() 方法可在已有的子節(jié)點前插入一個新的子節(jié)點。
語法:
insertBefore(newnode,node);
參數(shù):
newnode: 要插入的新節(jié)點。
node: 指定此節(jié)點前插入節(jié)點。
刪除節(jié)點removeChild()
removeChild() 方法從子節(jié)點列表中刪除某個節(jié)點。如刪除成功，此方法可返回被刪除的節(jié)點，如失敗，則返回 NULL。
語法:
nodeObject.removeChild(node)
參數(shù):
node ：必需，指定需要刪除的節(jié)點。
我們來看看下面代碼，刪除子點。
運行結(jié)果:
HTML 刪除節(jié)點的內(nèi)容: javascript
注意: 把刪除的子節(jié)點賦值給 x，這個子節(jié)點不在DOM樹中，但是還存在內(nèi)存中，可通過 x 操作。
如果要完全刪除對象，給 x 賦 null 值，代碼如下:
替換元素節(jié)點replaceChild()
replaceChild 實現(xiàn)子節(jié)點(對象)的替換。返回被替換對象的引用。
語法：
node.replaceChild (newnode,oldnew )
參數(shù)：
newnode : 必需，用于替換 oldnew 的對象。
oldnew : 必需，被 newnode 替換的對象。
創(chuàng)建元素節(jié)點createElement
createElement()方法可創(chuàng)建元素節(jié)點。此方法可返回一個 Element 對象。
語法：
document.createElement(tagName)
參數(shù):
tagName：字符串值，這個字符串用來指明創(chuàng)建元素的類型。
注意：要與appendChild() 或 insertBefore()方法聯(lián)合使用，將元素顯示在頁面中。
創(chuàng)建文本節(jié)點createTextNode
createTextNode() 方法創(chuàng)建新的文本節(jié)點，返回新創(chuàng)建的 Text 節(jié)點。
語法：
document.createTextNode(data)
參數(shù)：
data : 字符串值，可規(guī)定此節(jié)點的文本。
瀏覽器窗口可視區(qū)域大小
獲得瀏覽器窗口的尺寸（瀏覽器的視口，不包括工具欄和滾動條）的方法:
一、對于IE9+、Chrome、Firefox、Opera 以及 Safari：
? window.innerHeight - 瀏覽器窗口的內(nèi)部高度
? window.innerWidth - 瀏覽器窗口的內(nèi)部寬度
二、對于 Internet Explorer 8、7、6、5：
? document.documentElement.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。
? document.documentElement.clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
或者
Document對象的body屬性對應(yīng)HTML文檔的<body>標(biāo)簽
? document.body.clientHeight
? document.body.clientWidth
在不同瀏覽器都實用的 JavaScript 方案：
var w= document.documentElement.clientWidth
|| document.body.clientWidth;
var h= document.documentElement.clientHeight
|| document.body.clientHeight;
網(wǎng)頁尺寸scrollHeight
scrollHeight和scrollWidth，獲取網(wǎng)頁內(nèi)容高度和寬度。
一、針對IE、Opera:
scrollHeight 是網(wǎng)頁內(nèi)容實際高度，可以小于 clientHeight。
二、針對NS、FF:
scrollHeight 是網(wǎng)頁內(nèi)容高度，不過最小值是 clientHeight。也就是說網(wǎng)頁內(nèi)容實際高度小于 clientHeight 時，scrollHeight 返回 clientHeight 。
三、瀏覽器兼容性
var w=document.documentElement.scrollWidth || document.body.scrollWidth; var h=document.documentElement.scrollHeight || document.body.scrollHeight;
注意:區(qū)分大小寫
scrollHeight和scrollWidth還可獲取Dom元素中內(nèi)容實際占用的高度和寬度。
網(wǎng)頁尺寸offsetHeight
offsetHeight和offsetWidth，獲取網(wǎng)頁內(nèi)容高度和寬度(包括滾動條等邊線，會隨窗口的顯示大小改變)。
一、值
offsetHeight = clientHeight + 滾動條 + 邊框。
二、瀏覽器兼容性
var w= document.documentElement.offsetWidth
|| document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| document.body.offsetHeight;
網(wǎng)頁卷去的距離與偏移量
我們先來看看下面的圖：
scrollLeft:設(shè)置或獲取位于給定對象左邊界與窗口中目前可見內(nèi)容的最左端之間的距離 ，即左邊灰色的內(nèi)容。
scrollTop:設(shè)置或獲取位于對象最頂端與窗口中可見內(nèi)容的最頂端之間的距離 ，即上邊灰色的內(nèi)容。
offsetLeft:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置 。
offsetTop:獲取指定對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算頂端位置 。
注意:
1. 區(qū)分大小寫
2. offsetParent：布局中設(shè)置postion屬性(Relative、Absolute、fixed)的父容器，從最近的父節(jié)點開始，一層層向上找，直到HTML的body。
浙公網(wǎng)安備 33010602011771號