首頁 > 網際網路

html標籤中的data屬性有什麼用?怎麼獲取值?

2019-12-12 14:13:21

在看別人的程式碼裡,會看到有一些html標籤會有data屬性的,比如data-text等等,這些屬性有什麼用?怎麼獲取它的值?

1

我們在一個div裡看到這裡的data屬性,為data-text屬性。


2

其實這個屬性可以結合jquery的data方法來快速獲取,設定對應屬性值的。我們先引入jquery檔案。


3

在頁面上新增一個ready方法,意思是等頁面載入完成後執行裡面的程式碼。


4

可以使用data方法來獲得對應的屬性值,傳入的引數就是text,即為data-text橫線後面的那些字元。


5

執行頁面後,我們可以在瀏覽器控制台,看到獲取到的結果屬性值。


6

除了能獲取值,還可以設定值,可以設定原來已有的值,或者新增一個新的data屬性值。在方法的引數里分別傳入屬性名和屬性值就行了。


7

執行後,我們直接在控制台裡獲取新設定的值,可以看到能成功獲取。



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