html5之data-属性

1.png

所以明白了以下内容：

①html5才有的属性，也就意味着如果在非html5场合中使用，那就完全是一个自定义属性了。

②因为本身也是自定义属性，所以用$(this).attr("data-toggle")的方式取值是完全没问题的。

③必须以data- 开头

例子

<a id="testA"  href="#" class="dropdown-toggle"  data-toggle="dropdown" data-role-name="arolename"></a>
作为说明，我们新添加一个data-属性（data-role-name）

①：采用dataset的方式获取data-xx属性值。

应用了data-属性的元素含有dataset的属性，可以直接访问dataset的各项，如下：

     var testA =  document.getElementById("testA");

     alert(testA.dataset.toggle);     //dropdown

注意：

规则1：data-属性访问时不能带前缀；

规则2：访问data-属性时，其后面的用-分割的字符要采用驼峰的写法。

  alert(testA.dataset.roleName);     //arolename 

②：用jquery调用data-属性的方式。

jquery的data方法能完美的支持data-属性，但同样要使用上面两个规则，如：

  $("#testA").data("toggle");             //dropdown      

  $("#testA").data("roleName");      // arolename 

//用data()方法向元素添加数据并获取

$("div").data("greeting", "Hello World");  //添加数据

$("div").data("greeting");  //获取数据

---

3. 额外补充：

<a id="testA"  href="#" class="dropdown-toggle"  data-toggle="dropdown"data-role-name="arolename"></a>

data-属性的增删改

var testA =  document.getElementById("testA");

①data-属性的删除 delete testA.dataset.toggle;

②data-属性的增加 testA.dataset.newAdd = "123";

③data-属性的修改 testA.dataset.roleName= "brolename";

原文：https://blog.csdn.net/ttongzw/article/details/21181031