使用数据属性 data-* 属性允许我们在标准内于HTML元素中存储额外的信息

HTML 语法

  • 语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一篇文章,而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性:
<article
  id="electriccars"
  data-columns="3"
  data-index-number="12314"
  data-parent="cars">
...
</article>

JavaScript 访问

  • 在外部使用JavaScript去访问这些属性的值同样非常简单。你可以使用getAttribute()配合它们完整的HTML名称去读取它们,但标准定义了一个更简单的方法:DOMStringMap你可以使用dataset读取到数据。

  • 为了使用dataset对象去获取到数据属性,需要获取属性名中data-之后的部分(要注意的是破折号连接的名称需要改写为骆驼拼写法(如"index-number"转换为"indexNumber"))。

var article = document.querySelector('#electriccars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
  • 每一个属性都是一个可读写的字符串。在上面的例子中,article.dataset.columns = 5.将会调整属性的值为5。

CSS 访问

  • 注意,data设定为HTML属性,他们同样能被CSS访问。比如你可以通过generated content使用函数attr()来显示data-parent的内容:
article::before {
  content: attr(data-parent);
}
  • 你也同样可以在CSS中使用属性选择器根据data来改变样式:
article[data-columns='3'] {
  width: 400px;
}
article[data-columns='4'] {
  width: 600px;
}

参考地址

©️2020 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值