可能大家在使用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属性的更多相关文章

  1. 【翻译】详解HTML5 自定义 Data 属性

    原标题:HTML5 Custom Data Attributes (data-*) 你是否曾经使用 class 或 rel 来保存任意的元数据,只为了使你的JavaScript更简单?如果你回答是的, ...

  2. 【转载】HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到data-role.data-theme等的使用,比如:通过如下代码即可实现页眉的效果:   [html]  <div data-role= ...

  3. js（jQuery）获取自定义data属性的值

    有时候因为需要在标签上设置自定义data属性值, <div class="col-sm-6 col-md-4" id="get_id" data-c_id ...

  4. js 获取html5的data属性

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dat ...

  5. js获取自定义data属性

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. js取自定义data属性

    //20170329 原本以为只能attr或者prop来获取属性,但是今天看别人的代码他自定义了一个属性,却取不到他的属性值,我自己在本地又可以取到,难道是phtml的原因,于是我到网上查找,发现了一 ...

  7. html5的自定义data-＊属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  8. html5 data属性的使用

    html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...

  9. HTML data属性简介以及低版本浏览器兼容算法

    实例 使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <l ...

随机推荐

  1. CDH 5.16.1 离线部署 & 通过 CDH 部署 Hadoop 服务

    参考 Cloudera Enterprise 5.16.x Installing Cloudera Manager, CDH, and Managed Services Installation Pa ...

  2. 12.22daily_scrum

    今天是我们小组M2阶段开始一周结束,各项工作进入一个阶段性的总结过程,悬浮窗的设计也已经告一段落进入调试的阶段,新的工作任务有了添加,即滑锁密码的加入,更好地加深了用户体验性,软件的可用性也进一步加强 ...

  3. akm

    队名--牛肉面不要牛肉不要面 队伍成员 211406285 林志松 [队长兼前端开发] 211606368 林书浩 [系统设计] 211606357 陈远军 [UI美工] 211606335 吴沂章 ...

  4. 通俗易懂的word2Vec负采样理解

    理解:http://www.shuang0420.com/2017/03/21/NLP%20%E7%AC%94%E8%AE%B0%20-%20%E5%86%8D%E8%B0%88%E8%AF%8D%E ...

  5. 高效获取网页源码COM

    目前获取网页源码有几种方法: 1.WebClient下载页面2.HttpWebRequest发请求获取3.com组件xmlhttp获取 三者比较:WebClient代码最少,效率最慢:xmlhttp代 ...

  6. react-router JS 控制路由跳转（转载）

    Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.han ...

  7. C语言入门：05.scanf函数

    一.变量的内存分析 1.字节和地址 为了更好地理解变量在内存中的存储细节,先来认识一下内存中的“字节”和“地址”. (1)内存以“字节为单位”

  8. Zoom 会议系统

    Jfrog的培训过程中 发现ppt的效果很不理想  讲师使用zoom的方式效果很好 首先说一下 zoom的定价体系 官网信息: https://www.zoom.us/profile 好像必须使用 企 ...

  9. Redis的核心Hystrix在Spring mvc的使用

    核心Hystrix,Hystrix对于接口调用具有很好的保护,能在多服务依赖的分布式系统中,有效的提供应用的可用性,并且对失败应用进行熔断和恢复检查,让应用在复杂的环境中也能各种稳. http://t ...

  10. Python学习---------登陆系统代码实现

    题目要求: 一.编写登陆入口 1.输入用户名密码 2.认证成功后显示欢迎的信息 3.输错三次后锁定 Readme: 1.本次实现了登陆系统,若锁定就输出为锁定用户(锁定信息保存在user_lock.t ...