zoukankan      html  css  js  c++  java
  • HTML5自定义data属性

    可能大家在使用jquery mobile时,经常会看到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>

    最后页面显示效果如下:



  • 相关阅读:
    解决winform DataGridView 绑定数字值列排序不对的问题
    C#中向数据库中添加注册新用户,并查询数据库中是否存在同名的用户。
    SQL数据库的脱机与联机操作
    odoo视频教程收集
    odoo10导入导出-转
    草稿-bom- 肥料生产
    freebsd 域名服务器
    freebsd启动报错:My unqualified host name unkown...Sleeping for retry.
    docker-freebsd-20150625
    supervisorctl error
  • 原文地址:https://www.cnblogs.com/hehe520/p/6330183.html
Copyright © 2011-2022 走看看