在大家查看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. 六，apache修改默认根文件路径

    1,安装完apache后,项目默认根路径是E:\Program Files\AppServ\www. 默认根路径在httpd.conf中默认配置过了,我们可以通过修改配置文件改变项目默认根路径. Do ...

  2. liunx相关指令

    修改网卡命名规范 ​ a 如何进入到救援模式 修改网卡 1.修改配置文件名称 /etc/sysconfig/network-scripts/
 名称为:ifcfg-xxx 2.修改配置文件内的 dev ...

  3. Java中equals，hashcode

         在Java语言中,Object对象中包含一个equals和hashCode方法,其中hashCode方法是由JVM本地代码(native code)实现的,返回值是一个有符号的32位整数,对 ...

  4. Bloom分类法

    美国教育心理学家Bloom将教育的目标分为六类,从低到高,依次是:知识(Knowledge).理解(comprehension).应用(application).分析(analysis).综合(syn ...

  5. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  6. Oracle 中分组排序取值的问题

    整理一下排序: 建表语句:create table EXAM(  name    VARCHAR2(32),  subject VARCHAR2(32),  score   INTEGER)数据:IN ...

  7. CART树

    算法概述 CART(Classification And Regression Tree)算法是一种决策树分类方法. 它采用一种二分递归分割的技术,分割方法采用基于最小距离的基尼指数估计函数,将当前的 ...

  8. java-forkjoin框架的使用

    ForkJoin是Java7提供的原生多线程并行处理框架,其基本思想是将大任务分割成小任务,最后将小任务聚合起来得到结果.fork是分解的意思, join是收集的意思. 它非常类似于HADOOP提供的 ...

  9. 02-python基本数据类型

    python的变量不需要声明, 但变量使用前必须复制, 因为python中所有的内容全部是对象 变量是没有类型的, 有类型的是指向内存对象的类型 a = ' a = 是合法的 此外, python还可 ...

  10. php中时间相差8小时的解决办法

    引用:http://www.111cn.net/phper/31/42398.htm 在php中使用date('Y-m-d H:i:s');得出的结果会相差8个小时,原来是时区的问题 解决办法: 1. ...