访问数据属性
使用数据集属性
新的 dataset
属性允许访问(用于读取和写入)任何元素上的所有数据属性 data-*
。
<p>Countries:</p>
<ul>
<li id="C1" onclick="showDetails(this)" data-id="US" data-dial-code="1">USA</li>
<li id="C2" onclick="showDetails(this)" data-id="CA" data-dial-code="1">Canada</li>
<li id="C3" onclick="showDetails(this)" data-id="FF" data-dial-code="3">France</li>
</ul>
<button type="button" onclick="correctDetails()">Correct Country Details</button>
<script>
function showDetails(item) {
var msg = item.innerHTML
+ "\r\nISO ID: " + item.dataset.id
+ "\r\nDial Code: " + item.dataset.dialCode;
alert(msg);
}
function correctDetails(item) {
var item = document.getEmementById("C3");
item.dataset.id = "FR";
item.dataset.dialCode = "33";
}
</script>
注意:dataset
属性仅在现代浏览器中受支持,并且比所有浏览器支持的 getAttribute
和 setAttribute
方法稍慢。
使用 getAttribute 和 setAttribute 方法
如果要在 HTML5 之前支持旧版浏览器,可以使用 getAttribute
和 setAttribute
方法,这些方法用于访问任何属性,包括数据属性。上面例子中的两个函数可以这样写:
<script>
function showDetails(item) {
var msg = item.innerHTML
+ "\r\nISO ID: " + item.getAttribute("data-id")
+ "\r\nDial Code: " + item.getAttribute("data-dial-code");
alert(msg);
}
function correctDetails(item) {
var item = document.getEmementById("C3");
item.setAttribute("id", "FR");
item.setAttribute("data-dial-code", "33");
}
</script>