html5自定义属性的方法

html5中允许标签自定义属性，并传值，这样通过js接受判断这个参数，我们可以控制页面显示不同的效果，例如点赞/收藏的状态，页面布局的显示控制状态，当然也可以直接当html到js传递参数的方法。css也有传递参数的方法，可以参照《html传参，css接受？What 弄啥嘞？》

1.html5自定义属性值方法：data-自定义名="自定义值"，例如：data-name = "七娃"；

看下面案例：

<p id="box" data-p="51qux">123456</p>

2.获取自定义值及修改方法；

// 原生js
 var pp = document.getElementById("box");
console.log(pp.dataset.p); // 获取方式dataset.自定义值
pp.dataset.p = "嗨，七娃！";  // 修改方式 直接赋值
console.log(pp.dataset.p);
			
// jquery
let  pp = $("#box").data("p");
console.log(pp);
$("#box").data("p","嗨，七娃！");
pp = $("#box").data("p");
console.log(pp);