浅析HTML5:'data

2021-02-23 10:07 jianzhan

在大伙儿查询HTML时,常常会看到data-role、data-theme等的应用,例如:根据以下编码便可完成页眉的实际效果:

<div data-role="header">   
     <h1>我是题目</h1>   
</div>

     为何写1个data-role="header"就可以完成底部为黑色、文本垂直居中显示信息的实际效果呢?

     本文出示1种最简易的完成方法,让大伙儿对这些用法有个直观的掌握。

     大家写1个html网页页面,自定1个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来结构数据信息,填滥竽充数据等;

总结

以上所述是网编给大伙儿详细介绍的HTML5:'data-'特性的功效,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!