JS趴趴往上走-HTMLElement.dataset


 <ul>
  <li data-num="1" data-item="one" class="number">數字1</li>
  <li data-num="2" data-item="two" class="number">數字2</li>
  <li data-num="3" data-item="three" class="number">數字3</li>
 </ul>


在有些網頁裡會看到data-*的屬性,但這是什麼呢?又能幹嘛

HTMLElement.dataset

其實data-*是一種可以自定義的屬性,可以幫助工程師在HTML上自創屬性來綁定和驗證資料

data-*有幾個規則
  • dash後面的*屬性名稱不能使用大寫字母,e.g.data-Num或者data-Size...等
  • *不能包含分號
  • *絕對不能以 xml 起頭,無論是否用於 xml

data-*的應用

當你想取出data-*的值,JS上你可以使用dateset物件取值

var num=document.querySelectorAll('.number');

//取多個data-*
console.log(num[0].dataset);//{item:"0",num:"1"}

//取一個data-*,在後面填寫data-*的屬性
console.log(num[0].dataset.num); //1



另外範例:把JS上的陣列渲染到HTML上

See the Pen
JS-data-*應用
by yanennn (@yennnnn)
on CodePen.



另外也可以使用data-*取得特定元素的CSS

ul li[data-item="one"]{
 color:red;
}

ul li[data-item="two"]{
 color:green;
}


另外範例:

See the Pen
CSS的data-*應用
by yanennn (@yennnnn)
on CodePen.




或者使用CSS讀取data-*的內容

ul li:hover::after{
  content:attr(data-item);
  background-color: yellow;
}


資料來源:
https://muki.tw/tech/pure-css-tooltip-data-tag/
https://pjchender.blogspot.com/2017/01/html-5-data-attribute.html

留言