Quando você olha para HTML, muitas vezes vê o uso de função de dados, tema de dados, etc. Por exemplo, o efeito de cabeçalho pode ser alcançado por meio do seguinte código:
<div data-role=header> <h1>Eu sou o título</h1> </div>
Por que escrever um data-role=header pode obter o efeito de fundo preto e texto centralizado?
Este artigo fornece o método de implementação mais simples para dar a todos uma compreensão intuitiva desses usos.
Escrevemos uma página HTML e personalizamos um atributo data-chb=header Esperamos que a cor de fundo da área div com este atributo seja preta, o texto seja branco e seja exibido no centro; não tiver o atributo personalizado data-chb será exibido da maneira padrão, o código HTML é o seguinte:
<body> <div data-chb=header> <h1>Usei o atributo personalizado data-chb para o div</h1> </div> <br/> <div> Não usei o atributo personalizado data-chb ., exiba-o como quiser;
Para obter um efeito de exibição onde a cor de fundo é preta, o texto é branco e a exibição é centralizada, definimos o seguinte css:
<style> .ui_header { cor de fundo: preto; alinhamento de texto: centro: branco; borda:1px sólido #000;Em seguida, usamos o seguinte método js para adicionar definições CSS dinamicamente e alterar o estilo de exibição de divs com atributos data-chb quando a página é carregada:
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; Control for(var i=0;i<length;i++){ var elem = elems[i] //Obter os atributos personalizados do controle var customAttr =; elem.dataset.chb; //Você também pode obter atributos personalizados da seguinte maneira //var customAttr = elem.dataset[chb] //Se for um valor de cabeçalho que predefinimos, significa que precisa ser processado if(customAttr==header ){ //Adicionar estilo elem.setAttribute(class,ui_header);Claro que além das funções acima, este atributo também possui outras funções, como construir dados através de JS, preencher dados, etc.;
ResumirO texto acima é o atributo HTML5: 'data-' apresentado pelo editor para você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!