search

Home  >  Q&A  >  body text

What's the difference with html5 data-* custom attributes.

<li data-animal="fish">Salmon</li> and<li animal="fish">Salmon</li> New What is the difference between html5 custom attributes and ordinary defined attributes? They are both defined attributes.

曾经蜡笔没有小新曾经蜡笔没有小新2744 days ago785

reply all(3)I'll reply

  • 高洛峰

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

    1. Normative
    2. Have a dedicated interface dataset

    reply
    0
  • 为情所困

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

    As mentioned above, the access methods of properties are different.

    <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"

    reply
    0
  • ringa_lee

    ringa_lee2017-07-05 09:57:59

    In the IDE, no warning will be reported if there is a data- prefix.

    reply
    0
  • Cancelreply