html中data-*属性的作用,html data属性

　　当你看HTML的时候，你经常会看到数据角色、数据主题等的使用。例如，标题效果可以通过下面的代码来实现：

　　Div data-role=header h1我是标题/h1 /div为什么可以写一个data-role=header 来达到黑底居中文字显示的效果？

　　本文提供了最简单的实现方法，让大家对这些用法有一个直观的了解。

　　我们编写一个html页面，并自定义data-chb=header 属性。我们希望具有该属性的div区域背景色为黑色，文字为白色，并显示在中央；默认情况下显示不带data-chb自定义属性的Div。html代码如下所示：

　　Body data-chb= header H1我是一个使用data-chb自定义属性的div/h1 /div br/div。我没有使用data-CHB自定义属性，可以随心所欲的显示；/div /body为了实现‘背景色为黑色，文字为白色，居中显示’的显示效果，我们定义了如下css:

　　风格。ui_header { background-color:黑色；文本对齐：居中；颜色：白色；边框：1px纯色# 000；} /style然后我们动态添加css定义，在页面加载时用data-chb属性改变div的显示样式，如下js方法：

　　script type= text/JavaScript window . onload=function(){ var elems=document . getelementsbytagname( div )；如果(elems！=nullelems . length 0){ var length=elems . length；//遍历所有DIV控件(var I=0；ilengthI){ var elem=elems[I]；//获取该控件的自定义属性var custom attr=elem . dataset . CHB；//也可以通过以下方式获取自定义属性//var custom attr=elem . dataset[ CHB ]；//如果是我们预定义的头值，则表示if (customattr== header )需要处理{//添加样式elem.setattribute (class ， UI _ header )；}}}} /script当然这个属性除了上面的功能还有其他功能，比如通过JS构造数据，填充数据等。

　　总结

　　以上是边肖给大家介绍的HTML5: data-属性的作用。希望对你有帮助。如果您有任何问题，请给我留言，边肖将及时回复您。非常感谢您对网站的支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。