HTML5的data-*自定义属性有哪些-

data-*属性不断是没有花工夫去理解的一个见识点，偶尔看到此博文写的较为细致易懂，就转载一下。 HTML5的data-*自定义属性

HTML5添加了一项新功能是自定义数据属性，也就是data-*自定义属性。在HTML5中我们可以运用以data-为前缀来设定我们需要的自定义属性，来进行一些数据的寄存。固然高级阅读器下可通过足本进行定义和数据存取。在项目实践中非常实用。当前采取这样的做法的框架也有许多，最常见的当属jQueryMobile。
概括运用办法例下：

在传统的做法中我们可以配合jquery运用，如下：

$("#head").attr("data-home");  
$("#head").attr("data-home","new");

或者纯js做法：
在IE阅读器里，我们通过猎取对象后直接调取就可以了

document.getElementById("head").["data-home"];  
document.getElementById("head").["data-home"] = "new";

在火狐和谷歌阅读器里，我们可以通过getAttribute办法来实现调取：

document.getElementById("head").getAttribute("data-home");  
document.getElementById("head").setAttribute("data-home","new");

在HTML5中的简约操纵办法：（dataset属性存取data-*自定义属性的值）
这种方式通过拜访一个元素的 dataset 属性来存取 data-* 自定义属性的值。这个 dataset 属性是HTML5 JavaScript API的一局部，用来返回一个所有选中元素 data- 属性的DOMStringMap对象。
运用这种办法时，不是运用完备的属性名，如data-home来存取数据，应当去除data-前缀。
还有一点特殊注意的是：data-属性名要是包括了连字符，例如：data-date-of-birth ，连字符将被去除，并转换为驼峰式的命名，前面的属性名转换后应当是：dateOfBirth。

QQ群：135430763
  
    
    



    

    
打赏
    

    

    	
        
    	

    		
感谢您的支持，我会继续努力的!
    	
    	

    		
    	
    		
扫码打赏，你说多少就多少
    	

    		

	    		
	    		
    		
    		

	    		
	    		
    		
    	
    	

    		
打开支付宝扫一扫，即可进行扫码打赏哦
    		
百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！