# h5自定义对象 ### 一、方式一 在很早以前我们自定义元素的属性要通过 `user-defined-attribute="value"`的方式来设置自己需要的属性 设置自定义属性 ```

杭城小刘

``` 获取自定义属性 ``` document.getElementsByTagName("h1")[0].getAttribute("user-defined-attribute") ``` ## 二、方式二 现在H5为我们提供了一个data属性 **"data-" **作为前缀,可以让所有的HTML元素都支持自定义的属性,只要在标签里面以 **"data-"** 为前缀定义需要的属性即可 设置自定义属性 ```

杭城小刘

``` 获取自定义属性(使用H5自定义属性对象Dataset来获取) ``` var myDiv = document.getElementsByTagName("h1")[0]; var theValue = myDiv.dataset; //DOMStringMap对象 document.getElementsByTagName("h1")[0].dataset.share document.getElementsByTagName("h1")[0].dataset["share"] ``` ``` document.getElementsByTagName("h1")[0].getAttribute("data-share") ``` `DOMStringMap`是HTML5一种新的含有多个名-值对的交互变量 ## 三、H5 dataset的操作 删掉一个data属性 ``` delete myDiv.dataset.share ``` 增加一个属性 ``` myDiv.dataset.happy="ok" ``` ## 四、dataset兼容性处理 如果不支持dataset,有必要做一下兼容性处理 ``` ``` 做一个实验: ``` 我的标题

杭城小刘

``` 然后利用chrome调试,在console命令行分别输入3条指令,结果如下图 ![实验结果](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/2017-12-05%20下午10.19.04.png) 可以看出来,dataset后跟的属性是驼峰命名原则,如果多个单词第二个单词首字母需要大写,检查元素可以看到神奇的变化。