在 HTML 中定義樣式的方式有 3 種：通過<link/>元素包含外部樣式表檔案、使用<style/>元素定義嵌入式樣式，以及使用 style 特性定義針對特定元素的樣式。“DOM2 級樣式”子產品圍繞這 3 種應用樣式的機制提供了一套 API。要确定浏覽器是否支援 DOM2 級定義的 CSS 能力，可以使用下列代碼。
var supportsDOM2CSS = document.implementation.hasFeature("CSS", "2.0");
var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2", "2.0");
12.2.1 通路元素的樣式
任何支援 style 特性的 HTML 元素在 JavaScript 中都有一個對應的 style 屬性。這個 style 對象是 CSSStyleDeclaration 的執行個體，包含着通過 HTML 的 style 特性指定的所有樣式資訊，但不包含與外部樣式表或嵌入樣式表經層疊而來的樣式。在 style 特性中指定的任何 CSS 屬性都将表現為這個style 對象的相應屬性。對于使用短劃線（分隔不同的詞彙，例如 background-image）的 CSS 屬性名，必須将其轉換成駝峰大小寫形式，才能通過 JavaScript 來通路。下表列出了幾個常見的 CSS 屬性及其在 style 對象中對應的屬性名。
多數情況下，都可以通過簡單地轉換屬性名的格式來實作轉換。其中一個不能直接轉換的 CSS 屬性就是 float。由于 float 是 JavaScript 中的保留字，是以不能用作屬性名。“DOM2 級樣式”規範規定樣式對象上相應的屬性名應該是 cssFloat；Firefox、Safari、Opera 和 Chrome 都支援這個屬性，而 IE支援的則是 styleFloat。
隻要取得一個有效的 DOM 元素的引用，就可以随時使用 JavaScript 為其設定樣式。以下是幾個例子。
var myDiv = document.getElementById("myDiv");
//設定背景顔色
myDiv.style.backgroundColor = "red";
//改變大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定邊框
myDiv.style.border = "1px solid black";
在以這種方式改變樣式時，元素的外觀會自動被更新。
通過 style 對象同樣可以取得在 style 特性中指定的樣式。以下面的 HTML 代碼為例。
<div id="myDiv" style="background-color:blue; width:10px; height:25px"></div>
在 style 特性中指定的樣式資訊可以通過下列代碼取得。
alert(myDiv.style.backgroundColor); //"blue"
alert(myDiv.style.width); //"10px"
alert(myDiv.style.height); //"25px"
如果沒有為元素設定 style 特性，那麼 style 對象中可能會包含一些預設的值，但這些值并不能準确地反映該元素的樣式資訊。
1. DOM 樣式屬性和方法
“DOM2級樣式”規範還為 style 對象定義了一些屬性和方法。這些屬性和方法在提供元素的 style特性值的同時，也可以修改樣式。下面列出了這些屬性和方法。
cssText：如前所述，通過它能夠通路到 style 特性中的 CSS 代碼。
length：應用給元素的 CSS 屬性的數量。
parentRule：表示 CSS 資訊的 CSSRule 對象。本節後面将讨論 CSSRule 類型。
getPropertyCSSValue(propertyName)：傳回包含給定屬性值的 CSSValue 對象。
getPropertyPriority(propertyName)：如果給定的屬性使用了!important 設定，則傳回
"important"；否則，傳回空字元串。
getPropertyValue(propertyName)：傳回給定屬性的字元串值。
item(index)：傳回給定位置的 CSS 屬性的名稱。
removeProperty(propertyName)：從樣式中删除給定屬性。
setProperty(propertyName,value,priority)：将給定屬性設定為相應的值，并加上優先
權标志（"important"或者一個空字元串）。
通過cssText 屬性可以通路 style特性中的 CSS代碼。在讀取模式下，cssText 傳回浏覽器對style特性中 CSS 代碼的内部表示。在寫入模式下，賦給 cssText 的值會重寫整個 style 特性的值；也就是說，以前通過 style 特性指定的樣式資訊都将丢失。例如，如果通過 style 特性為元素設定了邊框，然後再以不包含邊框的規則重寫 cssText，那麼就會抹去元素上的邊框。下面是使用 cssText 屬性的一個例子。
myDiv.style.cssText = "width: 25px; height: 100px; background-color: green";
alert(myDiv.style.cssText);
設定 cssText 是為元素應用多項變化最快捷的方式，因為可以一次性地應用所有變化。
設計 length 屬性的目的，就是将其與 item()方法配套使用，以便疊代在元素中定義的 CSS 屬性。 在使用 length 和 item()時，style 對象實際上就相當于一個集合，都可以使用方括号文法來代替item()來取得給定位置的 CSS 屬性，如下面的例子所示。
for (var i=0, len=myDiv.style.length; i < len; i++){
alert(myDiv.style[i]); //或者 myDiv.style.item(i)
}
無論是使用方括号文法還是使用 item()方法，都可以取得 CSS 屬性名（"background-color"，
不是"backgroundColor"）。然後，就可以在 getPropertyValue()中使用取得的屬性名進一步取得屬性的值，如下所示。
var prop, value, i, len;for (i=0, len=myDiv.style.length; i < len; i++){
prop = myDiv.style[i]; //或者 myDiv.style.item(i) value = myDiv.style.getPropertyValue(prop); alert(prop + " : " + value);}
getPropertyValue()方法取得的始終都是 CSS 屬性值的字元串表示。如果你需要更多資訊，可以使用 getPropertyCSSValue()方法，它傳回一個包含兩個屬性的 CSSValue 對象，這兩個屬性分别是：cssText 和 cssValueType。其中，cssText 屬性的值與 getPropertyValue()傳回的值相同， 而 cssValueType 屬性則是一個數值常量，表示值的類型：0 表示繼承的值，1 表示基本的值，2 表示 值清單，3 表示自定義的值。以下代碼既輸出 CSS 屬性值，也輸出值的類型。
var prop, value, i, len;
for (i=0, len=myDiv.style.length; i < len; i++){
prop = myDiv.style[i]; //或者 myDiv.style.item(i)
value = myDiv.style.getPropertyCSSValue(prop); alert(prop + " : " + value.cssText + " (" + value.cssValueType + ")");}
在實際開發中，getPropertyCSSValue()使用得比 getPropertyValue()少得多。IE9+、Safarie 3+以及 Chrome 支援這個方法。Firefox 7 及之前版本也提供這個通路，但調用總傳回 null。
要從元素的樣式中移除某個 CSS 屬性，需要使用 removeProperty()方法。使用這個方法移除一 個屬性，意味着将會為該屬性應用預設的樣式（從其他樣式表經層疊而來）。例如，要移除通過 style特性設定的 border 屬性，可以使用下面的代碼。
myDiv.style.removeProperty("border");
在不确定某個給定的 CSS 屬性擁有什麼預設值的情況下，就可以使用這個方法。隻要移除相應的屬性，就可以為元素應用預設值。
2. 計算的樣式
雖然 style 對象能夠提供支援 style 特性的任何元素的樣式資訊，但它不包含那些從其他樣式表層疊而來并影響到目前元素的樣式資訊。“DOM2 級樣式”增強了 document.defaultView，提供了 getComputedStyle()方法。這個方法接受兩個參數：要取得計算樣式的元素和一個僞元素字元串（例 如":after"）。如果不需要僞元素資訊，第二個參數可以是 null。getComputedStyle()方法傳回一個 CSSStyleDeclaration 對象（與 style 屬性的類型相同），其中包含目前元素的所有計算的樣式。
以下面這個 HTML 頁面為例。
<!DOCTYPE html>
<html>
<head>
<title>Computed Styles Example</title>
<style type="text/css">
#myDiv {
background-color: blue;
width: 100px;
height: 200px;
}
</style>
</head>
<body>
<div id="myDiv" style="background-color: red; border: 1px solid black"></div>
</body>
</html>
應用給這個例子中<div>元素的樣式一方面來自嵌入式樣式表（<style>元素中的樣式），另一方 面來自其 style 特性。但是，style 特性中設定了 backgroundColor 和 border，沒有設定 width 和 height，後者是通過樣式表規則應用的。以下代碼可以取得這個元素計算後的樣式。
var myDiv = document.getElementById("myDiv");
var computedStyle = document.defaultView.getComputedStyle(myDiv, null);
alert(computedStyle.backgroundColor); // "red"
alert(computedStyle.width); // "100px"
alert(computedStyle.height); // "200px"
alert(computedStyle.border); // 在某些浏覽器中是"1px solid black"
在這個元素計算後的樣式中，背景顔色的值是"red"，寬度值是"100px"，高度值是"200px"。我 們注意到，背景顔色不是"blue"，因為這個樣式在自身的 style 特性中已經被覆寫了。邊框屬性可能 會也可能不會傳回樣式表中實際的 border 規則（Opera 會傳回，但其他浏覽器不會）。存在這個差别的原因是不同浏覽器解釋綜合（rollup）屬性（如 border）的方式不同，因為設定這種屬性實際上會涉及 很多其他屬性。在設定 border 時，實際上是設定了四個邊的邊框寬度、顔色、樣式屬性 （ border-left-width 、 border-top-color 、 border-bottom-style ， 等 等 ）。 因 此 ， 即 使 computedStyle.border 不會在所有浏覽器中都傳回值，但 computedStyle.borderLeftWidth 會 傳回值。
IE 不支援 getComputedStyle()方法，但它有一種類似的概念。在 IE 中，每個具有 style 屬性 的元素還有一個 currentStyle 屬性。這個屬性是 CSSStyleDeclaration 的執行個體，包含目前元素全部計算後的樣式。取得這些樣式的方式也差不多，如下面的例子所示。
var myDiv = document.getElementById("myDiv");
var computedStyle = myDiv.currentStyle;alert(computedStyle.backgroundColor); //"red"
alert(computedStyle.width); //"100px"
alert(computedStyle.height); //"200px"
alert(computedStyle.border); //undefined
與 DOM 版本的方式一樣，IE 也沒有傳回 border 樣式，因為這是一個綜合屬性。
無論在哪個浏覽器中，最重要的一條是要記住所有計算的樣式都是隻讀的；不能修改計算後樣式對象中的 CSS 屬性。此外，計算後的樣式也包含屬于浏覽器内部樣式表的樣式資訊，是以任何具有預設值的 CSS 屬性都會表現在計算後的樣式中。例如，所有浏覽器中的 visibility 屬性都有一個預設值， 但這個值會因實作而異。在預設情況下，有的浏覽器将 visibility 屬性設定為"visible"，而有的浏覽器則将其設定為"inherit"。換句話說，不能指望某個 CSS 屬性的預設值在不同浏覽器中是相同的。如果你需要元素具有某個特定的預設值，應該手工在樣式表中指定該值。
12.2.2 操作樣式表
CSSStyleSheet 類型表示的是樣式表，包括通過<link>元素包含的樣式表和在<style>元素中定義 的樣式表。有讀者可能記得，這兩個元素本身分别是由 HTMLLinkElement 和 HTMLStyleElement 類型 表示的。但是，CSSStyleSheet 類型相對更加通用一些，它隻表示樣式表，而不管這些樣式表在 HTML中是如何定義的。此外，上述兩個針對元素的類型允許修改 HTML 特性，但 CSSStyleSheet 對象則是一套隻讀的接口（有一個屬性例外）。使用下面的代碼可以确定浏覽器是否支援 DOM2 級樣式表。
var supportsDOM2StyleSheets =
document.implementation.hasFeature("StyleSheets", "2.0");
CSSStyleSheet 繼承自 StyleSheet，後者可以作為一個基礎接口來定義非 CSS 樣式表。從
StyleSheet 接口繼承而來的屬性如下。
disabled：表示樣式表是否被禁用的布爾值。這個屬性是可讀/寫的，将這個值設定為 true 可以禁用樣式表。
href：如果樣式表是通過<link>包含的，則是樣式表的 URL；否則，是 null。
media：目前樣式表支援的所有媒體類型的集合。與所有 DOM 集合一樣，這個集合也有一個 length 屬性和一個 item()方法。也可以使用方括号文法取得集合中特定的項。如果集合是空 清單，表示樣式表适用于所有媒體。在 IE 中，media 是一個反映<link>和<style>元素 media 特性值的字元串。
ownerNode：指向擁有目前樣式表的節點的指針，樣式表可能是在 HTML 中通過<link>或 <style/>引入的（在 XML 中可能是通過處理指令引入的）。如果目前樣式表是其他樣式表通過 @import 導入的，則這個屬性值為 null。IE 不支援這個屬性。
parentStyleSheet：在目前樣式表是通過@import 導入的情況下，這個屬性是一個指向導入它的樣式表的指針。
title：ownerNode 中 title 屬性的值。
type：表示樣式表類型的字元串。對 CSS 樣式表而言，這個字元串是"type/css"。
除 了 disabled 屬性之外，其他屬性都是隻讀的。在支援以上所有這些屬性的基礎上，
CSSStyleSheet 類型還支援下列屬性和方法：
cssRules：樣式表中包含的樣式規則的集合。IE 不支援這個屬性，但有一個類似的 rules 屬性。
ownerRule：如果樣式表是通過@import 導入的，這個屬性就是一個指針，指向表示導入的規 則；否則，值為 null。IE 不支援這個屬性。
deleteRule(index)：删除 cssRules 集合中指定位置的規則。IE 不支援這個方法，但支援
一個類似的 removeRule()方法。
insertRule(rule,index)：向 cssRules 集合中指定的位置插入 rule 字元串。IE 不支援這
個方法，但支援一個類似的 addRule()方法。
應用于文檔的所有樣式表是通過 document.styleSheets 集合來表示的。通過這個集合的 length屬性可以獲知文檔中樣式表的數量，而通過方括号文法或 item()方法可以通路每一個樣式表。來看一個例子。
var sheet = null;
for (var i=0, len=document.styleSheets.length; i < len; i++){
sheet = document.styleSheets[i];
alert(sheet.href);
}
以上代碼可以輸出文檔中使用的每一個樣式表的 href 屬性（<style>元素包含的樣式表沒有
href 屬性）。
不同浏覽器的 document.styleSheets 傳回的樣式表也不同。所有浏覽器都會包含<style>元素和 rel 特性被設定為"stylesheet"的<link>元素引入的樣式表。IE 和 Opera 也包含 rel 特性被設定 為"alternate stylesheet"的<link>元素引入的樣式表。
也可以直接通過<link>或<style>元素取得 CSSStyleSheet 對象。DOM 規定了一個包含 CSSStyleSheet 對象的屬性，名叫 sheet；除了 IE，其他浏覽器都支援這個屬性。IE 支援的是styleSheet 屬性。要想在不同浏覽器中都能取得樣式表對象，可以使用下列代碼。
function getStyleSheet(element){
return element.sheet || element.styleSheet;
}
//取得第一個<link/>元素引入的樣式表
var link = document.getElementsByTagName("link")[0];
var sheet = getStylesheet(link);
這裡的 getStyleSheet()傳回的樣式表對象與 document.styleSheets 集合中的樣式表對象相同。
1. CSS 規則
CSSRule 對象表示樣式表中的每一條規則。實際上，CSSRule 是一個供其他多種類型繼承的基類型，其中最常見的就是 CSSStyleRule 類型，表示樣式資訊（其他規則還有@import、@font-face、 @page 和@charset，但這些規則很少有必要通過腳本來通路）。CSSStyleRule 對象包含下列屬性。
cssText：傳回整條規則對應的文本。由于浏覽器對樣式表的内部處理方式不同，傳回的文本可能會與樣式表中實際的文本不一樣；Safari 始終都會将文本轉換成全部小寫。IE 不支援這個屬性。
parentRule：如果目前規則是導入的規則，這個屬性引用的就是導入規則；否則，這個值為null。IE 不支援這個屬性。
parentStyleSheet：目前規則所屬的樣式表。IE 不支援這個屬性。
selectorText：傳回目前規則的選擇符文本。由于浏覽器對樣式表的内部處理方式不同，傳回 的文本可能會與樣式表中實際的文本不一樣（例如，Safari 3 之前的版本始終會将文本轉換成全
部小寫）。在 Firefox、Safari、Chrome 和 IE 中這個屬性是隻讀的。Opera允許修改 selectorText。
style：一個 CSSStyleDeclaration 對象，可以通過它設定和取得規則中特定的樣式值。
type：表示規則類型的常量值。對于樣式規則，這個值是 1。IE 不支援這個屬性。
其中三個最常用的屬性是 cssText、selectorText 和 style。cssText 屬性與 style.cssText
屬性類似，但并不相同。前者包含選擇符文本和圍繞樣式資訊的花括号，後者隻包含樣式資訊（類似于元素的 style.cssText）。此外，cssText 是隻讀的，而 style.cssText 也可以被重寫。
大多數情況下，僅使用 style 屬性就可以滿足所有操作樣式規則的需求了。這個對象就像每個元 素上的 style 屬性一樣，可以通過它讀取和修改規則中的樣式資訊。以下面的 CSS 規則為例。
div.box {
background-color: blue;
width: 100px;
height: 200px;
}
假設這條規則位于頁面中的第一個樣式表中，而且這個樣式表中隻有這一條樣式規則，那麼通過下列代碼可以取得這條規則的各種資訊。
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得規則清單
var rule = rules[0]; //取得第一條規則
alert(rule.selectorText); //"div.box"
alert(rule.style.cssText); //完整的 CSS 代碼
alert(rule.style.backgroundColor); //"blue"
alert(rule.style.width); //"100px"
alert(rule.style.height); //"200px"
使用這種方式，可以像确定元素的行内樣式資訊一樣，确定與規則相關的樣式資訊。與使用元素的方式一樣，在這種方式下也可以修改樣式資訊，如下面的例子所示。
var sheet = document.styleSheets[0];
var rules = sheet.cssRules || sheet.rules; //取得規則清單
var rule = rules[0]; //取得第一條規則
rule.style.backgroundColor = "red"必須要注意的是，以這種方式修改規則會影響頁面中适用于該規則的所有元素。換句話說，如果有 兩個帶有 box 類的<div>元素，那麼這兩個元素都會應用修改後的樣式。
2. 建立規則
DOM 規定，要向現有樣式表中添加新規則，需要使用 insertRule()方法。這個方法接受兩個參數：規則文本和表示在哪裡插入規則的索引。下面是一個例子。
sheet.insertRule("body { background-color: silver }", 0); //DOM 方法
這個例子插入的規則會改變元素的背景顔色。插入的規則将成為樣式表中的第一條規則（插入到了位置 0）——規則的次序在确定層疊之後應用到文檔的規則時至關重要。Firefox、Safari、Opera 和 Chrome 都支援 insertRule()方法。
IE8 及更早版本支援一個類似的方法，名叫 addRule()，也接收兩必選參數：選擇符文本和 CSS 樣式資訊；一個可選參數：插入規則的位置。在 IE 中插入與前面例子相同的規則，可使用如下代碼。
sheet.addRule("body", "background-color: silver", 0); //僅對 IE 有效
有關這個方法的規定中說，最多可以使用 addRule()添加 4 095 條樣式規則。超出這個上限的調用将會導緻錯誤。
要以跨浏覽器的方式向樣式表中插入規則，可以使用下面的函數。這個函數接受 4 個參數：要向其 中添加規則的樣式表以及與 addRule()相同的 3 個參數，如下所示。
function insertRule(sheet, selectorText, cssText, position){
if (sheet.insertRule){
sheet.insertRule(selectorText + "{" + cssText + "}", position);
} else if (sheet.addRule){
sheet.addRule(selectorText, cssText, position);
}
}
下面是調用這個函數的示例代碼。
insertRule(document.styleSheets[0], "body", "background-color: silver", 0);
雖然可以像這樣來添加規則，但随着要添加規則的增多，這種方法就會變得非常繁瑣。是以，如果要添加的規則非常多，我們建議還是采用第 10 章介紹過的動态加載樣式表的技術。
3. 删除規則
從樣式表中删除規則的方法是 deleteRule()，這個方法接受一個參數：要删除的規則的位置。例如，要删除樣式表中的第一條規則，可以使用以下代碼。
sheet.deleteRule(0); //DOM 方法
IE 支援的類似方法叫 removeRule()，使用方法相同，如下所示：
sheet.removeRule(0); //僅對 IE 有效
下面是一個能夠跨浏覽器删除規則的函數。第一個參數是要操作的樣式表，第二個參數是要删除的規則的索引。
function deleteRule(sheet, index){
if (sheet.deleteRule){
sheet.deleteRule(index);
} else if (sheet.removeRule){
sheet.removeRule(index);
}
}
調用這個函數的方式如下。
deleteRule(document.styleSheets[0], 0);
與添加規則相似，删除規則也不是實際 Web 開發中常見的做法。考慮到删除規則可能會影響 CSS 層疊的效果，是以請大家慎重使用。
12.2.3 元素大小
本節介紹的屬性和方法并不屬于“DOM2 級樣式”規範，但卻與 HTML 元素的樣式息息相關。DOM中沒有規定如何确定頁面中元素的大小。IE 為此率先引入了一些屬性，以便開發人員使用。目前，所有主要的浏覽器都已經支援這些屬性。
1. 偏移量
首先要介紹的屬性涉及偏移量（offset dimension），包括元素在螢幕上占用的所有可見的空間。元素 的可見大小由其高度、寬度決定，包括所有内邊距、滾動條和邊框大小（注意，不包括外邊距）。通過下列 4 個屬性可以取得元素的偏移量。
offsetHeight：元素在垂直方向上占用的空間大小，以像素計。包括元素的高度、（可見的） 水準滾動條的高度、上邊框高度和下邊框高度。
offsetWidth：元素在水準方向上占用的空間大小，以像素計。包括元素的寬度、（可見的）垂直滾動條的寬度、左邊框寬度和右邊框寬度。
offsetLeft：元素的左外邊框至包含元素的左内邊框之間的像素距離。
offsetTop：元素的上外邊框至包含元素的上内邊框之間的像素距離。
其中，offsetLeft 和 offsetTop 屬性與包含元素有關，包含元素的引用儲存在 offsetParent
屬性中。offsetParent 屬性不一定與 parentNode 的值相等。例如，<td>元素的offsetParent 是作為其祖先元素的<table>元素，因為<table>是在 DOM 層次中距<td>最近的一個具有大小的元素。 圖 12-1 形象地展示了上面幾個屬性表示的不同大小。
要想知道某個元素在頁面上的偏移量，将這個元素的 offsetLeft 和 offsetTop 與其 offsetParent的相同屬性相加，如此循環直至根元素，就可以得到一個基本準确的值。以下兩個函數就可以用于分别取得元素的左和上偏移量。
function getElementLeft(element){
var actualLeft = element.offsetLeft;
var current = element.offsetParent;
while (current !== null){
actualLeft += current.offsetLeft;
current = current.offsetParent;
}
return actualLeft;
}
function getElementTop(element){
var actualTop = element.offsetTop;
var current = element.offsetParent;
while (current !== null){
actualTop += current. offsetTop;
current = current.offsetParent;
}
return actualTop;
}
這兩個函數利用 offsetParent 屬性在 DOM 層次中逐級向上回溯，将每個層次中的偏移量屬性 合計到一塊。對于簡單的 CSS 布局的頁面，這兩函數可以得到非常精确的結果。對于使用表格和内嵌 架構布局的頁面，由于不同浏覽器實作這些元素的方式不同，是以得到的值就不太精确了。一般來說， 頁面中的所有元素都會被包含在幾個<div>元素中，而這些<div>元素的 offsetParent 又是 <body>元素，是以 getElementLeft()與 getElementTop()會傳回與 offsetLeft 和 offsetTop相同的值。
2. 客戶區大小
元素的客戶區大小（client dimension），指的是元素内容及其内邊距所占據的空間大小。有關客戶區 大小的屬性有兩個：clientWidth 和 clientHeight。其中，clientWidth 屬性是元素内容區寬度加 上左右内邊距寬度；clientHeight 屬性是元素内容區高度加上上下内邊距高度。圖 12-2 形象地說明 了這些屬性表示的大小。
從字面上看，客戶區大小就是元素内部的空間大小，是以滾動條占用的空間不計算在内。最常用到 這些屬性的情況，就是像第 8 章讨論的确定浏覽器視口大小的時候。如下面的例子所示，要确定浏覽器 視口大小，可以使用 document.documentElement 或 document.body（在 IE7 之前的版本中）的 clientWidth 和 clientHeight。
function getViewport(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
};
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
}
這個函數首先檢查 document.compatMode 屬性，以确定浏覽器是否運作在混雜模式。Safari 3.1 之前的版本不支援這個屬性，是以就會自動執行 else 語句。Chrome、Opera 和 Firefox 大多數情況下都 運作在标準模式下，是以它們也會前進到 else 語句。這個函數會傳回一個對象，包含兩個屬性：width 和 height；表示浏覽器視口（<html>或<body>元素）的大小。
3. 滾動大小
最後要介紹的是滾動大小（scroll dimension），指的是包含滾動内容的元素的大小。有些元素（例如 <html>元素），即使沒有執行任何代碼也能自動地添加滾動條；但另外一些元素，則需要通過 CSS 的 overflow 屬性進行設定才能滾動。以下是 4 個與滾動大小相關的屬性。
scrollHeight：在沒有滾動條的情況下，元素内容的總高度。
scrollWidth：在沒有滾動條的情況下，元素内容的總寬度。
scrollLeft：被隐藏在内容區域左側的像素數。通過設定這個屬性可以改變元素的滾動位置。
scrollTop：被隐藏在内容區域上方的像素數。通過設定這個屬性可以改變元素的滾動位置。
圖 12-3 展示了這些屬性代表的大小。
scrollWidth 和 scrollHeight 主要用于确定元素内容的實際大小。例如，通常認為<html>元素 是在 Web 浏覽器的視口中滾動的元素（IE6 之前版本運作在混雜模式下時是<body>元素）。是以，帶有垂直滾動條的頁面總高度就是 document.documentElement.scrollHeight。
對于不包含滾動條的頁面而言， scrollWidth 和 scrollHeight 與 clientWidth 和
clientHeight 之間的關系并不十厘清晰。在這種情況下，基于 document.documentElement 檢視 這些屬性會在不同浏覽器間發現一些不一緻性問題，如下所述。
Firefox 中這兩組屬性始終都是相等的，但大小代表的是文檔内容區域的實際尺寸，而非視口的尺寸。
Opera、Safari 3.1 及更高版本、Chrome 中的這兩組屬性是有差别的，其中 scrollWidth 和scrollHeight 等于視口大小，而 clientWidth 和 clientHeight 等于文檔内容區域的大小。
IE（在标準模式）中的這兩組屬性不相等，其中 scrollWidth 和 scrollHeight 等于文檔内
容區域的大小，而 clientWidth 和 clientHeight 等于視口大小。
在确定文檔的總高度時（包括基于視口的最小高度時），必須取得 scrollWidth/clientWidth 和 scrollHeight/clientHeight 中的最大值，才能保證在跨浏覽器的環境下得到精确的結果。下面就 是這樣一個例子。
var docHeight = Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight);
var docWidth = Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth);
注意，對于運作在混雜模式下的 IE，則需要用 document.body 代替 document.document
Element。
通過 scrollLeft 和 scrollTop 屬性既可以确定元素目前滾動的狀态，也可以設定元素的滾動位
置。在元素尚未被滾動時，這兩個屬性的值都等于 0。如果元素被垂直滾動了，那麼 scrollTop 的值 會大于 0，且表示元素上方不可見内容的像素高度。如果元素被水準滾動了，那麼 scrollLeft 的值會 大于 0，且表示元素左側不可見内容的像素寬度。這兩個屬性都是可以設定的，是以将元素的 scrollLeft 和 scrollTop 設定為 0，就可以重置元素的滾動位置。下面這個函數會檢測元素是否位
于頂部，如果不是就将其復原到頂部。
function scrollToTop(element){
if (element.scrollTop != 0){
element.scrollTop = 0;
}
}
這個函數既取得了 scrollTop 的值，也設定了它的值。
4. 确定元素大小
IE、Firefox 3+、Safari 4+、Opera 9.5及 Chrome為每個元素都提供了一個 getBoundingClientRect()方 法。這個方法傳回會一個矩形對象，包含 4 個屬性：left、top、right 和 bottom。這些屬性給出了元素在頁面中相對于視口的位置。但是，浏覽器的實作稍有不同。IE8 及更早版本認為文檔的左上角坐 标是(2, 2)，而其他浏覽器包括 IE9 則将傳統的(0,0)作為起點坐标。是以，就需要在一開始檢查一下位于 (0,0)處的元素的位置，在 IE8 及更早版本中，會傳回(2,2)，而在其他浏覽器中會傳回(0,0)。來看下面的 函數：
function getBoundingClientRect(element){
if (typeof arguments.callee.offset != "number"){
var scrollTop = document.documentElement.scrollTop;
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
}
這個函數使用了它自身的屬性來确定是否要對坐标進行調整。第一步是檢測屬性是否有定義，如果沒有就定義一個。最終的 offset 會被設定為新元素上坐标的負值，實際上就是在 IE 中設定為2，在 Firefox 和 Opera 中設定為0。為此，需要建立一個臨時的元素，将其位置設定在(0,0)，然後再調用其 getBoundingClientRect()。而之是以要減去視口的 scrollTop，是為了防止調用這個函數時視窗 被滾動了。這樣編寫代碼，就無需每次調用這個函數都執行兩次 getBoundingClientRect()了。接 下來，再在傳入的元素上調用這個方法并基于新的計算公式建立一個對象。
對于不支援 getBoundingClientRect()的浏覽器，可以通過其他手段取得相同的資訊。一般來
說，right 和 left 的內插補點與 offsetWidth 的值相等，而 bottom 和 top 的內插補點與offsetHeight 相等。而且，left 和 top 屬性大緻等于使用本章前面定義的 getElementLeft()和 getElementTop() 函數取得的值。綜合上述，就可以建立出下面這個跨浏覽器的函數：
function getBoundingClientRect(element){
var scrollTop = document.documentElement.scrollTop; var scrollLeft = document.documentElement.scrollLeft; if (element.getBoundingClientRect){if (typeof arguments.callee.offset != "number"){
var temp = document.createElement("div");
temp.style.cssText = "position:absolute;left:0;top:0;";
document.body.appendChild(temp);
arguments.callee.offset = -temp.getBoundingClientRect().top - scrollTop;
document.body.removeChild(temp);
temp = null;
}
var rect = element.getBoundingClientRect();
var offset = arguments.callee.offset;
return {
left: rect.left + offset,
right: rect.right + offset,
top: rect.top + offset,
bottom: rect.bottom + offset
};
} else { var actualLeft = getElementLeft(element); var actualTop = getElementTop(element); return { left: actualLeft - scrollLeft, right: actualLeft + element.offsetWidth - scrollLeft, top: actualTop - scrollTop, bottom: actualTop + element.offsetHeight - scrollTop } }}
這個函數在 getBoundingClientRect()有效時，就使用這個原生方法，而在這個方法無效時則 使用預設的計算公式。在某些情況下，這個函數傳回的值可能會有所不同，例如使用表格布局或使用滾動元素的情況下。