zoukankan      html  css  js  c++  java
  • HTML data-* 自定义属性

    HTML data-* 自定义属性

    data-*是HTML5新添加的全局属性,通过它我们可以自定义属性,就像id,class等属性一样。我们可以使用JavaScript来操作这些属性。

    <div id="mydiv" data-foo="bar">

    我们可以用下面这些方法来操作它。

    (1)dataset
    通过访问一个元素的 dataset 属性来存取 data-* 自定义属性的值。使用这种方法时,不是使用完整的属性名,应该去掉data- 前缀。

    var n = document.getElementById('mydiv');
    n.dataset.foo // bar
    n.dataset.foo = 'baz'
    

    (2)除了dataset属性,也可以用getAttribute('data-foo')、removeAttribute('data-foo')、setAttribute('data-foo')、hasAttribute('data-foo')等方法操作data-*属性。

    var n = document.getElementById('mydiv');
    n.getAttribute("data-foo") // bar
    n.setAttribute('data-foo','baz')
    

    注意:data-后面的属性名有限制,只能包含字母、数字、连词线(-)、点(.)、冒号(:)和下划线(_)。而且,属性名不应该使用A到Z的大写字母

  • 相关阅读:
    画笔
    进程和线程<二>
    进程和线程<一>
    文件<2>
    文件<1>
    窗口(3)
    窗口<二>
    窗口(1)
    消息
    位图
  • 原文地址:https://www.cnblogs.com/YeChing/p/6351234.html
Copyright © 2011-2022 走看看