在大家查看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. 978. Longest Turbulent Subarray

    A subarray A[i], A[i+1], ..., A[j] of A is said to be turbulent if and only if: For i <= k < j ...

  2. 【2019年OCP新题】OCP题库更新出现大量新题-11

    11.Your database is in archivelog mode. You want to disable archiving for the database. Examine thes ...

  3. 【css】——三种方法实现多列等高

    html: <section> <div class="item"> Lorem, ipsum dolor sit <div class=" ...

  4. Django的常用方法以及配置

    在setting 中配置能生成  sql log 的内容 LOGGING = { , 'disable_existing_loggers': False, 'handlers': { 'console ...

  5. 转的很好的前端html 内容

    HTML 初识 web服务本质 import socket def main(): sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM) s ...

  6. [经验]微信开放平台，一个APP secret可以绑定一个APP,然后再绑定一个ipad 版本APP

    微信开放平台,一个APP secret可以绑定一个APP,然后再绑定一个ipad 版本APP

  7. 4、xamarin forms 设置安卓的toolbar的高度

    降低学习成本是每个.NET传教士义务与责任. 建立生态,保护生态,见者有份. 今天有群友说 如何调整 toolbar 的 高度. 最初遇到这个问题第一反映就是CustomRender 设置高度借助la ...

  8. [转载]7款开源ERP系统比较

    现在有许多企业将ERP项目,在企 业中没有实施好,都归咎于软件产品不好.其实,这只是你们的借口.若想要将ERP软件真正与企业融合一体,首先得考虑企业的自身情况,再去选择适合的 ERP软件. 如果你的企 ...

  9. Oracle VM VirtualBox技巧

    配置文件 Linux 虚拟机配置文件分为两处. windows下: 1.用户名/.VirtualBox/ 这里面有2个配置文件: VirtualBox.xml 和 VirtualBox.xml-pre ...

  10. 剑指offer63：数据流中的中位数

    题目描述: 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中间两个数的平均值. ...