HTML5自定义data属性
可能大家在使用jquery mobile时，经常会看到data-role、data-theme等的使用，比如：通过如下代码即可实现页眉的效果：
[html]
<div data-role="header">
<h1>我是标题</h1>
</div>
为什么写一个data-role="header"就能实现底部为黑色、文字居中显示的效果呢？
本文提供一种最简单的实现办法，让大家对这些用法有个直观的了解。
我们写一个html页面，自定义一个data-chb="header"的属性，希望具备这个属性的div区域背景颜色为黑色，文字为白色，居中显示；不具备data-chb自定义属性的div按照默认方式显示，html代码如下：
[html]
<body>
<div data-chb="header">
<h1>我是使用了data-chb自定义属性的div</h1>
</div>
<br/>
<div>
我没有使用data-chb自定义属性，该怎么展现就怎么展现；
</div>
</body>
要想实现"背景颜色为黑色，文字为白色，居中显示"的显示效果，我们定义如下的css：
[css]
<style>
.ui_header {
text-align: center;
color:white;
border:1px solid #000;
}
</style>
然后我们通过如下js方法实现在页面加载时，动态添加css定义，改变具备data-chb属性的div的显示样式：
[javascript]
<script type="text/javascript">
window.onload=function(){
var elems = document.getElementsByTagName("div");
if(elems!=null&&elems.length>0){
var length = elems.length;
//遍历所有DIV控件
for(var i=0;i<length;i++){
var elem = elems[i];
//获取该控件的自定义属性
var customAttr = elem.dataset.chb;
//也可以通过如下方式获得自定义属性
//var customAttr = elem.dataset["chb"];
//如果是我们预先定义好的header值，表示需要处理
if(customAttr=="header"){
//添加样式
elem.setAttribute("class","ui_header");
}
}
}
}
</script>
HTML5自定义data属性的更多相关文章
- 【翻译】详解HTML5 自定义 Data 属性
原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...
- 【转载】HTML5自定义data属性
可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果: [html] <div data-role= ...
- js（jQuery）获取自定义data属性的值
有时候因为需要在标签上设置自定义data属性值, <div class="col-sm-6 col-md-4" id="get_id" data-c_id ...
- js 获取html5的data属性
我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...
- js获取自定义data属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js取自定义data属性
//20170329 原本以为只能attr或者prop来获取属性,但是今天看别人的代码他自定义了一个属性,却取不到他的属性值,我自己在本地又可以取到,难道是phtml的原因,于是我到网上查找,发现了一 ...
- html5的自定义data-＊属性和jquery的data()方法的使用示例
人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...
- html5 data属性的使用
html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...
- HTML data属性简介以及低版本浏览器兼容算法
实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...
随机推荐
- ctf入门常见类别
原视频在这里:实验吧-名师指导http://www.shiyanbar.com/course-video/watch-video/cid/419/vid/2000网络安全从业者尝试介绍 web应用渗透 ...
- linux 操作 mysql 指定端口登录 以及启动 停止
linux 操作 mysql 指定端口登录 mysql -uroot -p -h10.154.0.43 -P3341 1.查看mysql版本方法一:status;方法二:select version( ...
- Android Studio发布Release版本之坑--Unknown host 'd29vzk4ow07wi7.cloudfront.net'
使用Android Studio发布Release版本时,出现Unknown host 'd29vzk4ow07wi7.cloudfront.net'...错误. 解决方法:修改本机的DNS为8.8. ...
- linux 常用命令-tar(压缩、解压)
linux中通过tar命令来压缩解压文件,常用命令如下 主选项(主选项是必须要有的,作用是告诉这次操作的主要目的): 1)c: (create)创建压缩包或者打包 2)x:(extract)拆包 3) ...
- ThinkPHP框架知识（比较全的知识）
php框架 一.真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格 ...
- week8：个人博客作业
团队作业(5) 要求 在PM 带领下, 每个团队深入分析下面行业的App, 找到行业的Top 5 (从下面的三个备选中,任选一个行业即可) 英语学习/词典App 笔记App 旅游行业的手机App 选择 ...
- python项目离线环境配置指南
参考文献: http://blog.csdn.net/candcplusplus/article/details/52156324 https://www.cnblogs.com/michael-xi ...
- 《Bandwidth-Aware Scheduling With SDN in Hadoop：A New Trend for Big Data》--2017
Hadoop中使用SDN的带宽感知调度:大数据的一种新趋势 Abstract: 为了处理大规模的数据,提出了基于Hadoop框架的MapReduce,在Hadoop系统中,有一种叫做NP完全最小(NP ...
- final评论1
1-约跑APP 小组准备的非常的充分,还带了摄像头,发布过程清晰.团队的约跑项目界面相较于Beta版本进行了美化,增加了背景图片,使项目看起来更美观.同时项目支持聊天信息的接收和发送,个人觉得他们组的 ...
- [转帖]Kubernetes及容器编排的总体介绍【译】
Kubernetes及容器编排的总体介绍[译] 翻译自The New Stack<Kubernetes 生态环境>作者:JANAKIRAM MSV和 KRISHNAN SUBRAMANIA ...