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

html5自定义属性的方法-Qui-Note

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);