在大家查看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. 【新题】ocp 062 2019年考试新题-3

    3.A database is open read write and the instance has multiple sessions some of which have active tra ...

  2. jzoj5906

    我們首先發現,每一條邊都至少走1次,因為我們必須走到每一個節點按按鈕 如果我們不走一個節點,說明這個節點已經有傳送門了,但是必須走到這個節點開傳送門,矛盾 然後我們發現,每一條邊至多經過2次 如果我們 ...

  3. redis内存监控与回收

    Redis有自己的内存分配器,当key-value对象被移除时,Redis不会马上向操作系统释放其占用内存.redis之所以这样的设计有两个原因. OS可能会将释放内存交换到虚拟内存,但OS的虚拟内存 ...

  4. module.export与export的区别?

    对于大多数node初学者而言, module.exports应该都是理解的, 但多出来一个exports获取就有些疑问了 疑问一: 既然有module.exports了为什么还要有exports? 疑 ...

  5. 安装gitlab

    安装源: git clone https://gitlab.com/gitlab-org/gitlab-ce.git -b 7-10-stable gitlab 安装文档: 在github上:gitl ...

  6. easyui 中iframe嵌套页面，提示弹窗遮罩的解决方法，parent.$.messager.alert和parent.$.messager.confirm

    项目中用到easyui 布局,用到north,west,center三个区域,且在center中间区域嵌入iframe标签.在主内容区做一些小提示弹窗(例如删除前的弹窗提示确认)时,会遇到遮罩问题,由 ...

  7. 剑指offer六十一之序列化二叉树（待补充）

    一.题目 请实现两个函数,分别用来序列化和反序列化二叉树二.思路 三.代码 --------------------------------------------- 参考链接:

  8. 安卓7.0拍照遇到 Uri暴露错误

    最近,项目又做到,调用摄像头拍照获取图片这个功能. 用以前的代码直接用,发现在Android7.0上使用时会出现问题. Android6.0之后,动态申请权限已成常态. 调用摄像头拍照获取图片这个功能 ...

  9. 关联更新 Update

    Update a set a.Manage_FunctID=b.Manage_FunctID   From Manage_PageUrl a   Left join Manage_ButtonBar ...

  10. 解决ssh登陆超时方案

    ssh登陆一般默认3分钟无操作则断开连接,有时候还是很烦的,于是解决这个问题. sudo修改/etc/ssh/sshd_conf文件 #sudo vim /etc/ssh/sshd_config #在 ...