data-* 数据属性

一、概念
data-*属性允许我们在标准内于HTML元素中存储额外的信息。
所有在元素上以data-开头的属性都为数据属性。
二、javascript访问
1. getAttribute()
2. dataset对象获取数属性,属性名后的data-后面的部分(破折号连接的名称需要转换为用驼峰式命名)

<article id="test" data-columns="3" data-index-number="1234"> </article>
var test = document.querySelector("#test");
test.dataset.columns // 
test.dataset.indexNumber //

三、CSS访问
data attributes设定为HTML属性,他们同样可以被CSS访问

acticle::before{
    content: attr(data-parent)
}
article[data-columns='3']{
    width:300px;
}
article[data-columns='4']{
    width:400px;
}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值