《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 元素樣式操作

元素樣式操作操作元素樣式的3種方式如下。1通過style屬性操作樣式循環(huán)結(jié)構(gòu)語句通過style屬性操作樣式通過className屬性操作樣式通過classList屬性操作樣式循環(huán)語句操作元素樣式操作style屬性的示例代碼如下。element.style.樣式屬性名='樣式屬性值'; //設(shè)置樣式console.log(element.style.樣式屬性名); //獲取樣式1通過style屬性操作樣式元素對象樣式屬性名的書寫需要去掉CSS樣式名里的連字符“-”，并將連字符“-”后面的單詞首字母大寫style屬性中常用的樣式屬性名如下。名稱說明background設(shè)置或獲取元素的背景屬性backgroundColor設(shè)置或獲取元素的背景色display設(shè)置或獲取元素的顯示類型fontSize設(shè)置或獲取元素的字體大小height設(shè)置或獲取元素的高度left設(shè)置或獲取定位元素的左部位置listStyleType設(shè)置或獲取列表項標(biāo)記的類型overflow設(shè)置或獲取如何處理呈現(xiàn)在元素框外面的內(nèi)容textAlign設(shè)置或獲取文本的水平對齊方式textDecoration設(shè)置或獲取文本的修飾textIndent設(shè)置或獲取文本第一行的縮進(jìn)transform向元素應(yīng)用2D或3D轉(zhuǎn)換1通過style屬性操作樣式案例實(shí)現(xiàn)步驟首先需要為頁面中所有的按鈕元素注冊鼠標(biāo)單擊事件，然后在事件處理函數(shù)中對按鈕進(jìn)行遍歷，判斷每個按鈕是否為當(dāng)前觸發(fā)事件的按鈕，如果是則改變按鈕顏色，如果不是則恢復(fù)按鈕默認(rèn)顏色。2【案例】單擊按鈕改變按鈕顏色2【案例】單擊按鈕改變按鈕顏色使用鼠標(biāo)單擊第3個按鈕后的效果如下。3通過className屬性操作樣式當(dāng)為元素對象設(shè)置多種樣式時，可以操作元素對象的className屬性。先將元素對象的樣式寫在CSS中，利用CSS類選擇器為元素設(shè)置樣式，然后通過JavaScript操作className屬性更改元素的類名，從而更改元素的樣式。element.className='類名'; //設(shè)置類名console.log(element.className); //獲取類名操作className屬性的示例代碼如下。在開發(fā)過程中，對于元素中類的操作，我們可以使用元素對象的classList屬性。classList屬性的使用方式很靈活，可以對元素中的類名進(jìn)行獲取、添加、移除、判斷等操作。4通過classList屬性操作樣式element.classList通過classList屬性獲取類名的示例代碼如下。4通過classList屬性操作樣式classList屬性返回一個對象，稱為classList對象。classList對象是一個偽數(shù)組，偽數(shù)組中的每一項對應(yīng)一個類名，可通過數(shù)組索引訪問類名。TipclassList屬性在使用時需要注意IE瀏覽器的兼容問題，該屬性從IE10版本才開始才被支持，且IE10版本中classList屬性不能對SVG（可縮放矢量圖形）元素進(jìn)行操作。classList對象常用的屬性和方法如下。名稱說明length 獲取類名的數(shù)量add(class1,class2,…)為元素添加一個或多個class類名remove(class1,class2,…)移除元素的一個或多個class類名toggle(class,true|false)為元素切換class類名，第2個參數(shù)是可選參數(shù)，設(shè)為true表示添加，設(shè)為false表示移除，不設(shè)置表示有則移除，沒有則添加contains(class)判