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

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