欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

HTML5自定义data-* data(obj)属性和jquery的data()方法的使用_html5教程技巧

程序员文章站 2022-03-11 11:05:30
...
可能大家在使用jquery mobile时,经常会看到data-role、data-theme等的使用,比如:通过如下代码即可实现页眉的效果:

复制代码
代码如下:


我是标题




通过手机浏览,效果如下:

HTML5自定义data-* data(obj)属性和jquery的data()方法的使用_html5教程技巧HTML5自定义data-* data(obj)属性和jquery的data()方法的使用_html5教程技巧

为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢?


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


我们写一个html页面,自定义一个data-chb="header"的属性,希望具备这个属性的div区域背景颜色为黑色,文字为白色,居中显示;不具备data-chb自定义属性的div按照默认方式显示,html代码如下:

复制代码
代码如下:



我是使用了data-chb自定义属性的div






我没有使用data-chb自定义属性,该怎么展现就怎么展现;



要想实现"背景颜色为黑色,文字为白色,居中显示"的显示效果,我们定义如下的css:

复制代码
代码如下:



然后我们通过如下js方法实现在页面加载时,动态添加css定义,改变具备data-chb属性的div的显示样式:

复制代码
代码如下:



最后页面显示效果如下:

HTML5自定义data-* data(obj)属性和jquery的data()方法的使用_html5教程技巧

人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。

你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
下面的一个代码片段是一个有效的HTML5标记

复制代码
代码如下:

data-myid="3e4ae6c4e">Some awesome data