HTML5自定义data-* data(obj)属性和jquery的data()方法的使用_html5教程技巧
程序员文章站
2022-03-11 11:05:30
...
可能大家在使用jquery mobile时,经常会看到data-role、data-theme等的使用,比如:通过如下代码即可实现页眉的效果:
通过手机浏览,效果如下:
我没有使用data-chb自定义属性,该怎么展现就怎么展现;
要想实现"背景颜色为黑色,文字为白色,居中显示"的显示效果,我们定义如下的css:
然后我们通过如下js方法实现在页面加载时,动态添加css定义,改变具备data-chb属性的div的显示样式:
最后页面显示效果如下:
data-myid="3e4ae6c4e">Some awesome data
复制代码
代码如下:我是标题
通过手机浏览,效果如下:
为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢?
本文提供一种最简单的实现办法,让大家对这些用法有个直观的了解。
我们写一个html页面,自定义一个data-chb="header"的属性,希望具备这个属性的div区域背景颜色为黑色,文字为白色,居中显示;不具备data-chb自定义属性的div按照默认方式显示,html代码如下:
复制代码
代码如下:我是使用了data-chb自定义属性的div
我没有使用data-chb自定义属性,该怎么展现就怎么展现;
要想实现"背景颜色为黑色,文字为白色,居中显示"的显示效果,我们定义如下的css:
复制代码
代码如下:然后我们通过如下js方法实现在页面加载时,动态添加css定义,改变具备data-chb属性的div的显示样式:
复制代码
代码如下:最后页面显示效果如下:
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据。但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它副作用。这就是为什么在HTML5规范里增加了一个自定义data属性,你可以拿它做很多有用的事情。
你可以去读一下HTML5的详细规范,但这个自定义data属性的用法非常的简单,就是你可以往HTML标签上添加任意以 "data-"开头的属性,这些属性页面上是不显示的,它不会影响到你的页面布局和风格,但它却是可读可写的。
下面的一个代码片段是一个有效的HTML5标记:
复制代码
代码如下:data-myid="3e4ae6c4e">Some awesome data
上一篇: 20个为前端开发者准备的文档和指南(2)
下一篇: 解析HTML5中的标签嵌套规则
推荐阅读
-
HTML5的自定义属性data-*详细介绍和JS操作实例
-
html5的自定义data-*属性与jquery的data()方法的使用
-
HTML 5 的自定义 data-* 属性和jquery的data()方法的使用
-
jQuery中使用data()方法读取HTML5自定义属性data-*实例
-
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
-
HTML5新增属性data-*和js/jquery之间的交互及注意事项
-
jQuery中使用data()方法读取HTML5自定义属性data-*实例_jquery
-
html5的自定义data-*属性和jquery的data()方法的使用示例_jquery
-
HTML5 的自定义 data-* 属性和jquery的data()方法的使用
-
HTML5 的自定义 data-* 属性和jquery的data()方法的使用