搜尋

首頁  >  問答  >  主體

javascript - html5 data-* 自訂屬性有什麼不同。

<li data-animal="fish">Salmon</li> <li animal="fish">Salmon</li> 新出的html5自訂屬性和普通的定義屬性有什麼不同,都是定義屬性。

曾经蜡笔没有小新曾经蜡笔没有小新2727 天前773

全部回覆(3)我來回復

  • 高洛峰

    高洛峰2017-07-05 09:57:59

    1.規範性
    2.有專門的介面dataset

    回覆
    0
  • 为情所困

    为情所困2017-07-05 09:57:59

    如樓上所說,所以屬性的訪問方式不同。

    <li data-animal="fish" id="hello">Salmon</li>
    <li animal="fish" id="hi">Salmon</li>
    var hello = document.getElementById("hello");
    var hi = document.getElementById("hi");
    
    // 获取id为hello的元素的data-animal属性
    console.log(hello.getAttribute("data-animal")); // "fish"
    console.log(hello.dataset.animal); // "fish"
    
    // 获取id为hi的元素的animal属性
    console.log(hi.getAttribute("animal")); // "fish"

    回覆
    0
  • ringa_lee

    ringa_lee2017-07-05 09:57:59

    在IDE裡面, 有data-前綴的不會報警告.

    回覆
    0
  • 取消回覆