JS 高階 DOM 技術

1)樣式程式設計;在js中改變元素的樣式;主要是通過元素的:style 屬性來完成;obj.style 可以獲得在html中宣告的:

abc**中 style 屬性裡的內容;但我們無法獲得在標籤或外部css檔案中定義的該物件的屬性;

但我們可以通過更改 style 屬性的值來改變物件的樣式;格式為:obj.style.*** = "";

*** 為樣式特性;如:

obj.style.color = "red";

obj.style.fontweight = "bold";

obj.style.backgroundcolor = "#000000";

obj.style.border = "1px solid red";

從上面可以看出,在css中用單個單詞表示的特性,如:color border.等,在js設定style時還是用該單詞.但在css中通過 - 表示的特性,如:background-color,font-weight等,在js中則需要將 - 取消,並將後面的單詞的首字母大寫.

2)dom樣式;

另一種方法更改 style 中的屬性:

obj.getpropertyvalue(propertyname);返回css特性,引數為想要返回的特性名,這裡的特性名是在css中定義的名稱,不同於上面說的將 - 取消 ,然後將後面單詞首字母大寫,應該直接是:background-color這樣;

如:aaa;

alert(document.getelementbyidx_x_x("box").style.getpropertyvalue("color")); // rgb(0,0,0)

item(index):返回給定索引處的特性名,如:color;用法:obj.style.item(index);

setproperty(propertyname,value,priority);設定屬性,並設定是否為important,用法:obj.style.setproperty("color","red","")

removeproperty(propertyname);刪除屬性;

上面的方法ie不支援 -- 所有版本;

3)訪問樣式表;

前面說了我們無法通過物件的style屬性獲得外部css或

aaacss檔案中:

#tempid

因為id的優先順序比類名高,所以最終會將css檔案中對id設定的屬性給div元素,而覆蓋掉在style標籤中的定義;這時候通過:document.getelementbyidx_x_x("tempid").currentstyle.background獲得到的就是css檔案中定義的顏色

dom:

document.defaultview.getcomputedstyle();它根據給定的元素建立類似style的物件,這個方法接受兩個引數:需要獲採樣式的元素和:hover,first-letter之類的偽元素(如果不需要可以為null).

如: document.defaultview.getcomputedstyle(odiv,null).backgroundcolor;

5)innerhtml innertext outertext outerhtml

innerhtml : obj.innerhtml = "aaa

";將html**放入元素下級,且作為html解析,也就是說裡面的一些標籤會被正確的解析,如: ul會被解析成列表,a會被解析成鏈結;

innertext : obj.innertext = "ddd";將文字放入元素下級,但它會過濾掉標籤,這裡只會有ddd

outertext:

和outertext一樣,但它賦內容的時候會將自己本身也覆蓋掉;

outerhtml: 同上;

只有ie和opera才支援outertext和outerhtml