首頁 > 網際網路

js 如何將樣式關聯到className

2019-12-12 05:12:01

js要將樣式關聯到標籤中,主要使用jquery,簡化js操作的難度,通過className,也就是將css的樣式名稱關聯到標籤的class屬性中即可

1

開啟vscode,建立一個H5規範的頁面,用於演示js關聯樣式到標籤。為了便於js操作,本文引入jquery,使用jquery來簡化js操作


2

在演示頁面中新增一行測試文字,再新增一個按鈕,點選按鈕就改變測試文字的顏色


3

在演示頁面的上部,新增一個設定文字顏色的css樣式,並且選擇器設定為類選擇器,也就是class選擇器


4

在測試頁面底部,新增js,係結按鈕的點選事件。當按鈕點選的時候,將css的類選擇器名稱係結到標籤的class屬性中


5

在瀏覽器中開啟演示頁面,點選按鈕,就會看到演示文字顏色變化了,表明樣式係結成功了


6

在瀏覽器中按F12,開啟,開發者模式,找到演示文字的標籤,可以發現css樣式的類選擇器名稱已經寫到這個標籤的class屬性中了


7

總結,使用jquery的addClass("class類名"),就可以將css的類選擇器樣式係結到標籤中。通過removeClass("class類名")可以將樣式從標籤移除



IT145.com E-mail:sddin#qq.com