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
留言
張貼留言