关于H5自定义属性


今天做步步高公司的校招Web前端面试题,考到了H5中的自定义属性。说实话真的一脸懵逼,啥是自定义属性????其实这个自定义属性以前做项目用框架时经常见到,但是并没有去了解。

自定义属性的存在形式

其实就是HTML标签中的data-*属性

作用

自定义数据属性是为了保存页面或者应用程序的私有自定义数据,这些自定义数据属性保存进DOM中,对于整个DOM的布局和表现无任何影响,但是却可以方便操控整个网页的交互以及想要表达的效果。

自定义属性的设置

  • 直接在标签中设置:
<span id="test" data-age="21">test</span>
  • 通过js设置
var test = document.getElementById('test');
test.dataset.age = "21";
  • 通过jQuery设置
$('#test').attr('data-age','21');
或者
$('#test').data('age','21');

自定义属性的获取

  • 使用js获取
var test = document.getElementById('test');
test.dataset.age
  • 使用jQuery获取
$('#test').attr('data-age');
//或者
$('#test').data('age');

css中使用自定义属性

例如某个标签自定义属性如下:

<div data-city="Beijing"></div>

css中设置html中带有自定义属性的标签样式,代码如下:

[data-city]: {
	color: red;
}

注意,这样设置的样式优先级低于class

css中通过不同的自定义属性值设置不同的样式,代码如下:

[data-city = 'Beijing']: {
	color: red;
}
[data-city = 'Shenzhen']: {
	color: green;
}
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值