如何獲取HTML5自定義數據屬性data的值

對于很多從事web開發的小伙伴來說，使用HTML5的data屬性可能還有些陌生。下面小編將為大家演示操作方法，并希望能給大家提供參考和學習的機會。 步驟一：打開開發工具并新建一個HTML文件 為了

對于很多從事web開發的小伙伴來說，使用HTML5的data屬性可能還有些陌生。下面小編將為大家演示操作方法，并希望能給大家提供參考和學習的機會。

步驟一：打開開發工具并新建一個HTML文件

為了方便演示，首先我們需要打開開發工具，并新建一個HTML文件。

步驟二：在HTML標簽上設置data屬性

設置自定義數據屬性的語法是：data-*。我們可以在任意HTML標簽上設置data屬性，以便存儲一些自定義的數據。

步驟三：使用原生JS獲取自定義數據屬性的值

通過使用原生的JavaScript代碼，我們可以使用.getAttribute()方法來獲取自定義數據屬性的值。例如：

("demo1").getAttribute("data-num");

在瀏覽器的開發者工具中點擊【console】，你將看到成功獲取到data的值。

步驟四：使用jQuery獲取自定義數據屬性的值

除了使用原生的JavaScript，我們還可以使用jQuery庫來獲取自定義數據屬性的值。通過使用.attr()或.data()方法，我們可以輕松地獲取到所需的數據。例如：

var a  $("demo1").attr("data-type");
var b  $("demo2").data("type");

同樣，在瀏覽器的開發者工具中點擊【console】，你將看到成功獲取到data的值。

通過上述步驟，我們可以靈活使用HTML5的data屬性，并通過原生JS或jQuery來獲取自定義數據屬性的值。這為我們在網頁開發過程中存儲和使用數據提供了更好的選擇和體驗。