《Web前端基礎》課件-任務7：學習DOM模型 元素樣式操作

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