了解 HTML 自定义属性
H5自定义属性
- 自定义属性的目的是为了保存数据，有些数据可以保存到页面中而不用保存到数据库中。
- 获取自定义属性的方式是：getAttribute('属性')。
- 有一些自定义属性很容易引起歧义，不容易判断是元素的内置属性还是自定义属性。
- H5给我们新增了自定义属性：
- 属性名不要包含大写字母，在 data- 后必须至少有一个字符。
- 该属性可以是任何字符串。注意： 自定义属性前缀 "data-" 会被客户端忽略。设置HTML5自定义属性：
- HTML5规定自定义属性 data- 开头作为属性名并且赋值。
- 比如：
- 使用JavaScript设置：element.setAttribute('date-index',2)
- 获取HTML5自定义属性
- 兼容性获取 element.setAttribute('date-index',2)。
- HTML5新增 element.dataset.index 或者 element.dataset['index'] IE 11才开始支持。
实例：
<body> <p id="1" data-yhb="18" data-index="1">hello</p> <button id="btn_get">获取属性</button> <button id="btn_set">设置属性</button> <script> var p=document.querySelecter('p') document.querySelecter('#btn_get').onclick = function(){ // 可以使用 dataset.属性名称 的方式获取。 console.log(p.dataset.index) console.log(p.dataset.yhb) // 仍然可以使用 getAttribuet 方法获取带 data-前缀的属性。 console.log('data-index') } </script> </body>
拓展：
HTML5全局属性：
| 属性 | 描述 |
| accesskey | 设置访问元素的键盘快捷键。 |
| class | 规定元素的类名(classname）。 |
| contenteditableNew | 规定是否可编辑元素的内容。 |
| contextmenuNew | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| data-*New | 用于存储页面的自定义数据。 |
| dir | 设置元素中内容的文本方向。 |
| draggableNew | 指定某个元素是否可以拖动 |
| dropzoneNew | 指定是否将数据复制，移动，或链接，或删除。 |
| hiddenNew | hidden 属性规定对元素进行隐藏。 |
| id | 规定元素的唯一 id。 |
| lang | 设置元素中内容的语言代码。 |
lang |
设置元素中内容的语言代码。 |
| spellcheckNew | 检测元素是否拼写错误。 |
| style | 规定元素的行内样式（inline style）。 |
tabindex |
设置元素的 Tab 键控制次序。 |
title |
规定元素的额外信息（可在工具提示中显示）。 |
| translateNew | 指定是否一个元素的值在页面载入时是否需要翻译。 |
