怎樣訪問和設置元素的CSS屬性?

2016-07-11 1430 1 編輯:Monster 來源:相關書籍

在JavaScript中,除了能夠訪問元素的HTML屬性外,還能夠訪問和設置元素的css屬性,訪問和設置元素的CSS屬性可分為以下兩種方法。

1.使用style對象訪問和設置元素的行內CSS屬性

style對象是DOM對象的子對象,在建立了一個DOM對象后,可以使用style對象來訪問和設置元素的行內CSS屬性。語法如下:DOM元素.style.CSS屬性名可以看出,用DOM訪問CSS屬性和訪問HTML屬性的區別在于CSS屬性名前要有"style."。

說明:

①樣式設置必須符號CSS規范,否則該樣式會被忽略。

②如果樣式屬性名稱中不帶“一”號,如color,則直接使用style.color就可訪問該屬性值;如果樣式屬性名稱中帶有“一”號,如font-size,對應的style對象屬性名稱為fontSize。轉換規則是去掉屬性名稱中的“一”,再把后面單詞的第一個字母大寫即可。又如border-left-style,對應的style對象屬性名稱為borderLeftStyle。

③對于CSS屬性float,不能使用style.float訪問,因為float是JavaScript的保留字,要訪問該CSS屬性,在IE中應使用style.styleFloat,在Firefox中應使用style.cssFloat。

④使用style對象只能讀取到元素的行內樣式,而不能獲得元素所有的CSS樣式。如果將上例中p元素的CSS樣式改為嵌人式的形式,那么style對象是訪問不到的。因此,style對象獲取的屬性與元素的最終顯示效果并不一定相同,因為可能還有非行內樣式作用于元素。

⑤如果使用style對象設置元素的CSS屬性,而設置的CSS屬性和元素原有的任何CSS屬性沖突,由于style會對元素增加一個行內CSS樣式屬性,而行內CSS樣式的優先級最高,因此通過style設置的樣式一般為元素的最終樣式。

如果要為當前元素設置多條CSS屬性,可以使用styre對象的cssText方法。

2.使用className屬性切換元素的類名

為元素同時設置多條CSS屬性還可以將該元素原來的CSS屬性和修改后的CSS屬性分別寫到兩個類選擇器中,再修改該元素的class類名以調用修改后的類選擇器。

提示:如果要刪除元素的所有類名,設置DOM元素.className=""即可。

3.使用className屬性追加元素的類名

有時候元素可能已經應用了一個類選擇器中的樣式,如果想要使元素應用一個新的類選擇器但又不能去掉原有的類選擇器中的樣式,則可以使用追加類名的方法,當然這種情況也可以通過style對象添加行內樣式實現同樣效果。但是當追加元素的類名不是為了控制該元素的樣式,而是為了控制其子元素的樣式(如下拉菜單)時,就只能用這種方法實現。

提示:在"與over之間的空格一定不能省略,因為CSS中為元素設置多個類別名的語法是class="test over"(多個類名間用空格隔開),因此添加一個類名一定要在前面加空格。否則就變成了class="testover",這顯然不對。

4.使用replace方法去掉元素的某一個類名

如果要在元素已經應用了的幾個類名中去掉其中的一個則可以使用replace方法,將類名替換為空即可。

假設元素的類名原來是class="test over",則去掉后變成了class= "test"。要去掉的類名一定要用兩斜杠"/"括起來,如果用引號,則在Firefox中會不起作用。

5.獲取元素的最終CSS樣式

可以通過下面的方式獲取元素在瀏覽器中的最終樣式(即所有CSS規則作用在一起得到的樣式)。在IE和DOM兼容瀏覽器中獲取最終樣式的方式是不同的。

(1)IE:使用元素的currentStyle屬性即可獲得元素的最終樣式。

(2)DOM兼容瀏覽器:使用document.defaultView.getComputedStyle方法獲得最終樣式。

通過以下的方法可以在各種瀏覽器中獲取元素的最終樣式:

function getCurrentStyle(element) {

if(element.currentStyle)         //IE支持

return element.currentStyle;

else

return document.defaultView.getComputedStyle(element,null); } //DOM支持

注意:元素的最終樣式是只讀的,因此通過上述方式只能讀取最終樣式,而無法修改樣式。這使得在實際應用中獲取元素的最終樣式用途并不大。


本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾