在大家查看HTML时，经常会看到data-role、data-theme等的使用，比如：通过如下代码即可实现页眉的效果：

 <div data-role="header">

     <h1>我是标题</h1>

 </div>

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

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

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

 <body>

   <div data-chb="header">

     <h1>我是使用了data-chb自定义属性的div</h1>

   </div>

   <br/>

   <div>

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

   </div>

 </body>

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

 <style>

  .ui_header {

   background-color: black;

   text-align: center;

   color:white;

   border:1px solid #000;

 }

 </style>

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

 <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>     

当然此属性除了以上作用外，还有其他作用，如通过JS来构造数据，填充数据等；

转载链接：http://blog.csdn.net/yongxiaokang1/article/details/41644469

HTML5：'data-'属性的作用是什么的更多相关文章

  1. html5 data属性的使用

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

  2. HTML5 data属性

    在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写,否则是undefinde 使用这样的 ...

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

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

  4. js 获取html5的data属性

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

  5. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  6. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  7. JS组件系列——使用HTML标签的data属性初始化JS组件

    前言:最近使用bootstrap组件的时候发现一个易用性问题,很多简单的组件初始化都需要在JS里面写很多的初始化代码,比如一个简单的select标签,因为仅仅只是需要从后台获取数据填充到option里 ...

  8. HTML5学习总结——HTML5新增属性与表单元素

    一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...

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

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

  10. HTML 5：你必须知道的data属性

    原文:All You Need to Know About the HTML5 Data Attribute 译文:你必须知道HTML 5 的Data属性 译者:dwqs HTML 5的Data属性可 ...

随机推荐

  1. CentOS 6 - 升级内核

    有的时候,需要升级Linux内核,今天我就是在CentOS 6中升级内核,在没有升级内核之前,我的CentOS 6只有2.6.32这一个内核,也是默认启动的内核.下面就开始一步步操作升级内核了! 一, ...

  2. 使用sqlyog连接到服务器数据库，实现可视化数据操作。（完美解决版。）《亲测！！！！》

      服务器中的表 select Host ,User ,Select_priv ,Insert_priv ,Update_priv ,Delete_priv ,Create_priv ,Drop_pr ...

  3. MATLAB基础操作笔记

    A( i , : ) 表示 A矩阵的第 i 行所有元素 A( : , j ) 表示 A矩阵的第 j 列所有元素 A( : , : ) 表示 A矩阵的 所有元素 定义函数时,函数中有嵌套函数需要在结束时 ...

  4. 【BZOJ2732】【HNOI2012】射箭 二分+半平面交

    此题重点在卡精度!!! 本地已经下载数据测试并通过了,然而$B$站上还是$WA$的,可能是$CPU$对于$long\ double$ 的资瓷不一样. 此题答案显然是可以二分出来的,设当前要监测是否能射 ...

  5. C#：注册机的实现

    先看界面 软件的实现: SoftReg类: using System; using System.Collections.Generic; using System.Linq; using Syste ...

  6. Sublime Text 3编辑器的SublimeRPEL快捷键设置

    Sublime Text 3软件由于每次运行程序都要执行:Tools -> SublimeREPL -> Python -> RUN current file 菜单有点麻烦,所以现在 ...

  7. CentOS7 yum方式安装 MongoDB 3.4 复制集

    CentOS7 yum方式安装 MongoDB 3.4 环境.准备 Centos7 系统 配置MongoDB的yum源,添加文件/etc/yum.repos.d/mongodb-org-3.4.rep ...

  8. phpstorm之自定义代码碎片（tab键自动填充代码）

    打开phpstorm 的设置界面(快捷键ctrl+alt+s) 比如上面的form表单,需要在生成以后自动跳转到“名称”的位置,然后更改,可以如下修改

  9. mysql查看权限的命令

    mysql查看用户权限的命令 1.这里用来查看用户存储过程: show grants for 用户; eg: show grants for root@'localhost';#这样就会把root用户 ...

  10. Java并发编程笔记之ThreadLocal源码分析

    多线程的线程安全问题是微妙而且出乎意料的,因为在没有进行适当同步的情况下多线程中各个操作的顺序是不可预期的,多线程访问同一个共享变量特别容易出现并发问题,特别是多个线程需要对一个共享变量进行写入时候, ...