美文网首页
data- 属性

data- 属性

作者: 我是Msorry | 来源:发表于2021-01-21 14:35 被阅读0次

可以暂存自定义的数据, node.dataset 可以访问 data- 属性构造的对象,被 JavaScript 很好的操作,CSS 中也能访问到

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    article{
      border:1px solid red;
    }
    article::before {
      content: attr(data-parent);
    }
    article[data-columns='3'] {
      height: 600px;
    }
  </style>
</head>
<body>
<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
</article>
</body>
<script>
  var article = document.querySelector('#electriccars');
  article.dataset.columns // "3"
  article.dataset.indexNumber // "12314"
  article.dataset.parent // "cars"
</script>
</html>

相关文章

  • html中的data-*的用法和作用 自定义属性

    定义和用法 **data- *** 属性用于存储私有页面后应用的自定义数据。**data- *** 属性可以在所...

  • H5中data-*属性

    data-* 属性是 HTML5 中的新属性。 定义和用法 (1)data-* 属性用于存储页面或应用程序的私有自...

  • HTML5新增标签

    html5属性规范 自定义属性data-开头 所有的自定义属性,必须以data-开头 img input可以不闭合...

  • data属性

    在HTML5中添加了data-的方式来自定义属性,所谓data-实际上上就是data-前缀加上自定义的属性名,使用...

  • HTML5中的自定义属性总结

    在HTML5中添加了data-的方式来自定义属性,所谓data-实际上上就是data-前缀加上自定义的属性名,使用...

  • thymeleaf页面中使用data-*自定义属性

    data-*自定义属性语法 格式:data-* 1.自定义单个属性 2.自定义多个属性 获取自定义属性值 下面我们...

  • h5中data-存储数据

    在标签中使用data- eg: “data-属性名”这个属性的值,在点击事件处理函数中使用,e.target.da...

  • 关于输入框或文本框添加默认前置值不可删除且可继续输入

    原理: 通过设置元素的data-* 属性的值,再通过css属性attr(data-*)获取设置的值,然后再使用be...

  • jQ获取html5的data-*属性

    data-*自定义数据属性 HTML5规定可以为元素添加非标准型的属性,只需添加前缀data-,这些属性可以随意添...

  • data- 属性

    可以暂存自定义的数据, node.dataset 可以访问 data- 属性构造的对象,被 JavaScript ...

网友评论

      本文标题:data- 属性

      本文链接:https://www.haomeiwen.com/subject/cazrzktx.html