html5里新增data-*的属性的定义和用法

<body>
   <div class="box" id="app" data-d="dad">1321</div>
</body>

var box = document.getElementById('app');
 box.onclick = function () {
     var animalType = box.getAttribute("data-d");
     alert(box.innerHTML+','+animalType)
}

html5里的data-*
用于存储页面或应用程序的私有定制数据。
赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验 定义的规则

  • 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
  • 属性值可以是任意字符串
javascript
120 views
Comments
登录后评论
Sign In
·

这个忘记了，现在看了一下 又学习了一下

·

sunglasses 这个骚操作很常见啦，还可以用来定制样式，比如哪些 data-abc 属性触发哪些样式：

div[data-lang="zh-TW"] {
  color: purple;
}
·

这个有时在一些组件不方便传值的时候就很好用，可以看下这篇：另类的前端组件传参方式，特殊场景下的解决方案