首頁 > 網際網路

如何使用jquery給html元素增加樣式

2019-12-12 19:13:41

在jquery中,給html元素增加樣式,可以把新增加的樣式定義在一個新類名中,使用addClass()方法給html元素增加樣式類的方法實現增加樣式。下面小編以給p元素增加樣式為例,講解實現的過程。

1

新建一個html檔案,命名為test.html,用於講解如何使用jquery給html元素增加樣式


2

在test.html檔案內,使用script標籤載入jquery.min.js檔案,這是jquery庫檔案,只有載入該檔案,才能使用addClass()方法。


3

在test.html檔案內,使用p標籤建立一行文字,同時使用css設定文字的大小為30px,顏色為紅色。


4

在test.html檔案內,定義一個新的樣式,類名為addcss,用於後面點選時,增加此樣式至p標籤。


5

在test.html檔案內,建立一個button按鈕,並繫結click點選事件,當按鈕被點選時,執行function函數。


6

在function函數內,使用addClass()方法給p標籤增加addcss類名樣式,程式碼如下:


7

在瀏覽器開啟test.html檔案,點選按鈕,給文字增加樣式,如下圖所示:




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