JavaScript 自定義屬性 data-*使用介紹

更新時間：2023年06月09日 00:56:15 作者：memeflyfly

Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無關(guān)的信息,讀取的時候是通過dataset對象，使用”.”來獲取屬性，需要去掉data-前綴

JavaScript 自定義屬性 data-*

定義和用法

data-* 屬性用于存儲頁面或應(yīng)用程序的私有自定義數(shù)據(jù)。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。

存儲的（自定義）數(shù)據(jù)能夠被頁面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗（不進(jìn)行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫查詢）。

data-* 屬性包括兩部分：

屬性名不應(yīng)該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
屬性值可以是任意字符串

注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。

HTML 4.01 與 HTML5 之間的差異

data-* 屬性是 HTML5 中的新屬性。

語法

屬性值

值	描述
somevalue	規(guī)定屬性的值（以字符串）。

實例

function showDetails(element) {
      var elementType = element.getAttribute("data-type");
      alert(element.innerHTML + "是" + elementType + "屬性角色");
    }

  <h1>角色</h1>
  <p>點擊某個角色來查看其屬性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪盧克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲謝爾</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>

使用dataset屬性操作自定義屬性

function showDetails(element) {
    var elementType = element.getAttribute("data-type");
    var h3 = document.getElementsByTagName('h3')[0]
    alert(element.innerHTML + "是" + elementType + "屬性角色");
    h3.innerHTML = element.dataset.type
  }

<h1>角色</h1>
  <p>點擊某個角色來查看其屬性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪盧克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲謝爾</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>
  <h3></h3>

在函數(shù)中alert語句前添加一行代碼，對將被點擊的元素的data-type賦值

element.dataset.type = '不知道啥屬性'

<h1>角色</h1>
  <p>點擊某個角色來查看其屬性：</p>
  <ul>
    <li onclick="showDetails(this)" id="fire" data-type="火">迪盧克</li>
    <li onclick="showDetails(this)" id="thunder" data-type="雷">菲謝爾</li>
    <li onclick="showDetails(this)" id="water" data-type="水">芭芭拉</li>
  </ul>
  <h3></h3>
<script> 
function showDetails(element) {
    var elementType = element.getAttribute("data-type");
    var h3 = document.getElementsByTagName('h3')[0]
	element.dataset.type = '不知道啥屬性'
    alert(element.innerHTML + "是" + elementType + "屬性角色");
    h3.innerHTML = element.dataset.type
  }
</script>

js獲取自定義屬性data-

Html5規(guī)范中規(guī)定自定義屬性需要添加前綴data-,目的是提供與渲染無關(guān)的信息。

讀取的時候是通過dataset對象，使用”.”來獲取屬性，需要去掉data-前綴

<div id="content" data-age="18">12345</div>

var content= document.getElementById('content');
alert(content.dataset.age)
//jquery
$('#content').data('age');//讀

字符需要轉(zhuǎn)化為駝峰命名

<div id="content" data-user-list="user_list">data-user_list自定義屬性 </div>

var content= document.getElementById('content');
alert(content.dataset.userList)
//jquery
$('#content').data('userList');//讀

到此這篇關(guān)于jQuery 獲取與設(shè)置元素屬性的詳細(xì)方法(看完這篇文章就搞明白了)的文章就介紹到這了,更多相關(guān)jQuery 獲取與設(shè)置元素屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！