12.2.1 訪問元素的樣式【JavaScript高級程序設計第三版】

時間 2019-12-05

標籤 12.2.1 訪問元素樣式 javascript 高級程序設計第三欄目 JavaScript 简体版

原文原文鏈接

任何支持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 爲其設置樣式。如下是幾個例子。css

var myDiv = document.getElementById("myDiv");
//設置背景顏色
myDiv.style.backgroundColor = "red";
//改變大小
myDiv.style.width = "100px";
myDiv.style.height = "200px";
//指定邊框
myDiv.style.border = "1px solid black";

在以這種方式改變樣式時，元素的外觀會自動被更新。html

在標準模式下，全部度量值都必須指定一個度量單位。在混雜模式下，能夠將style.width 設置爲"20"，瀏覽器會假設它是"20px"；但在標準模式下，將style.width 設置爲"20"會致使被忽略——由於沒有度量單位。在實踐中，最好始終都指定度量單位。

經過style 對象一樣能夠取得在style 特性中指定的樣式。如下面的HTML 代碼爲例。api

<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 屬性的一個例子。htm

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()中使用取得的屬性名進一步取得屬性的值，以下所示。blog

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+、Safarie3+以及Chrome 支持這個方法。Firefox 7 及以前版本也提供這個訪問，但調用總返回null。
要從元素的樣式中移除某個CSS 屬性，須要使用removeProperty()方法。使用這個方法移除一個屬性，意味着將會爲該屬性應用默認的樣式（從其餘樣式表經層疊而來）。例如，要移除經過style特性設置的 border 屬性，可使用下面的代碼。

myDiv.style.removeProperty("border");

在不肯定某個給定的CSS 屬性擁有什麼默認值的狀況下，就可使用這個方法。只要移除相應的屬性，就能夠爲元素應用默認值。

除非另有說明，本節討論的屬性和方法都獲得了IE9+、Firefox、Safari、Opera 9+以及Chrome 的支持。

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 會返回值。

須要注意的是，即便有些瀏覽器支持這種功能，但表示值的方式可能會有所區別。例如，Firefox 和Safari 會將全部顏色轉換成RGB 格式（例如紅色是rgb(255,0,0)）。所以，在使用getComputedStyle()方法時，最好多在幾種瀏覽器中測試一下。

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 屬性的默認值在不一樣瀏覽器中是相同的。若是你須要元素具備某個特定的默認值，應該手工在樣式表中指定該值。