自定义属性规范
H5规范:data-* 属性以data-开头,其格式如下data-*=”xxx”
<div id="demo" data-myname="userName" data-age="10">
Node.dataset是以对象形式存在的,当我们为同一个DOM节点指定了多个自定义属性时,
Node.dataset则存储了所有的自定义属性的值。
var demo = document.querySelector(选择器);
获取属性:
当我们如下格式设置时,则需要以驼峰格式才能正确获取
- jquery的方式获取
- $(‘#id’).data(‘属性名称)
- H5的方式获取
- dataset.属性名称(省略data-)
- dataset.[属性名称](省略data-)
var name = demo.dataset['userName'];
var age = demo.dataset.userName;
<div id="demo" data-my-name="userName" data-age="10">
data-* 属性以data-开头 遵循小驼峰命名 data-user-name被获取时使用userName (浏览器解析大小转为小写)
正确获取方法:
var name = demo.dataset[‘userName’];
var age = demo.dataset.userName;
修改属性:
- jquery的方式修改
- $(‘#id’).data(属性名称 , 属性值);
- H5的方式修改
- dataset.属性名称 = ‘属性值’
demo.dataset['userName'] = 'developer';
此案例使用自定义属性的优点分析:
在导航标签里分别添加一个自定义属性, 格式为data-id="id名"
这里的id名对应内容标签里的id
属性对应的值, 这样的话导航标签就跟内容标签对应起来了, 不需考虑标签的先后顺序.
TAB栏案例
<!DOCTYPE html>
<html