HTML5中的自定義數(shù)據(jù)屬性應(yīng)用於將小的，非敏感的數(shù)據(jù)直接存儲(chǔ)在HTML中，以通過(guò)JavaScript或CSS訪問(wèn)。 1。它們是存儲(chǔ)項(xiàng)目ID，UI狀態(tài)或配置選項(xiàng)的理想選擇。 2。通過(guò)使用駱駝命名約定的數(shù)據(jù)集，通過(guò)getAttribute（）或JavaScript中的數(shù)據(jù)集屬性訪問(wèn)它們。 3。避免過(guò)度使用，敏感的數(shù)據(jù)，並假設(shè)所有值都是需要手動(dòng)轉(zhuǎn)換的字符串。始終確保更改觸發(fā)相應(yīng)的JavaScript邏輯，因?yàn)樗鼈儾粫?huì)自動(dòng)影響頁(yè)面行為。

HTML5中的自定義數(shù)據(jù)屬性是一種將額外信息存儲(chǔ)在HTML元素中的方法，而不會(huì)影響頁(yè)面的佈局或行為。它們從data-開(kāi)始 - 然後是您選擇的名稱(chēng)，並且可以保持任何字符串值。

例如：

 <div data-product-id =“ 12345”>產(chǎn)品詳細(xì)信息</div>

該data-product-id屬性不會(huì)自行執(zhí)行任何操作，但是它為JavaScript或CSS提供了一種訪問(wèn)與該元素相關(guān)的自定義值的方法。

您什麼時(shí)候應(yīng)該使用自定義數(shù)據(jù)屬性？

當(dāng)您需要將少量數(shù)據(jù)從HTML傳遞到JavaScript時(shí)，它們最有用。您可以將它們直接嵌入標(biāo)記中，而不是在腳本中使用硬編碼值或提出額外的服務(wù)器請(qǐng)求。

常見(jiàn)用例：

• 存儲(chǔ)動(dòng)態(tài)內(nèi)容的項(xiàng)目ID（例如列表中的產(chǎn)品）
• 跟蹤UI狀態(tài)（例如， data-expanded="true" ）
• 將配置選項(xiàng)傳遞給小部件或插件

請(qǐng)記?。哼@些屬性並非用於大型數(shù)據(jù)集或敏感信息。讓他們簡(jiǎn)單明了。

如何使用JavaScript訪問(wèn)數(shù)據(jù)屬性

您可以使用標(biāo)準(zhǔn)DOM方法讀取和編寫(xiě)它們。

要獲得一個(gè)值：

 const元素= document.queryselector（'[[data-product-id]'）;
const productid = element.getAttribute（'data-prododuct-id'）;

設(shè)置一個(gè)值：

 element.setAttribute（'data-product-id'，'67890'）;

如果您使用的是現(xiàn)代JavaScript，還有dataset ，這有點(diǎn)清潔：

 const productid = element.dataset.productid; //“ 12345”
element.dataset.productId ='67890';

請(qǐng)注意， dataset在data-後使用駱駝作為名稱(chēng)。因此data-user-id成為dataset.userId 。

要提防的事情

• 不要過(guò)度使用它們：很容易用太多的數(shù)據(jù)屬性混亂HTML。僅在必要時(shí)使用它們。
• 避免使用敏感數(shù)據(jù)：由於它們?cè)谠创a中可見(jiàn)，因此請(qǐng)勿存儲(chǔ)密碼或令牌。
• 使用適當(dāng)?shù)念?lèi)型：數(shù)據(jù)屬性始終存儲(chǔ)字符串，因此，如果您需要數(shù)字或布爾值，請(qǐng)手動(dòng)轉(zhuǎn)換它們：

   const count = parseint（element.dataset.count，10）;
  const isAtive = element.dataset.active ==='true';

  另外，請(qǐng)記住，更改數(shù)據(jù)屬性不會(huì)自動(dòng)更新頁(yè)面上的任何內(nèi)容 - 您仍然需要JavaScript邏輯來(lái)響應(yīng)這些更改。

  ---

  基本上，自定義數(shù)據(jù)屬性為您提供了一種將額外信息附加到HTML元素的干淨(jìng)方法。他們得到了廣泛的支持，並在周到地使用時(shí)非常適合現(xiàn)代網(wǎng)絡(luò)開(kāi)發(fā)實(shí)踐。

  以上是什麼是自定義數(shù)據(jù)屬性，如何在HTML5中使用？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！