Explicação detalhada dos atributos personalizados data-* do HTML5

No attr e prop do jQuery, é mencionado que o uso indevido de propriedade em versões anteriores ao IE9 causará vazamentos de memória, e a diferença entre Atributo e Propriedade também é muito problemática. No HTML5, o método data-* é adicionado para personalizar atributos. o chamado data-* é na verdade o prefixo de dados mais um nome de atributo personalizado. Os dados podem ser armazenados usando essa estrutura. Usar data-* pode resolver a situação atual de atributos personalizados confusos e não gerenciados.

data-* possui dois métodos de configuração, que podem ser escritos diretamente nas tags dos elementos HTML.

 <div id=test data-age=24> Clique aqui </div>

A idade dos dados é um atributo personalizado. Claro, também podemos operá-lo por meio de JavaScript. Os elementos em HTML5 terão um atributo dataset, que é uma coleção de pares de valores-chave do tipo DOMStringMap.

 var teste = document.getElementById('teste');

Isso adiciona um atributo personalizado data-my ao div. Há duas coisas a serem observadas ao usar JavaScript para operar o conjunto de dados.

1. Precisamos remover o prefixo data-* ao adicionar ou ler atributos. Como no exemplo acima, não usamos o formulário test.dataset.data-my = 'Byron';.

2. Se o nome do atributo também contiver um hífen (-), ele precisará ser convertido para a nomenclatura camel case. Mas se um seletor for usado em CSS, precisaremos usar o formato de hífen.

Adicione conteúdo ao código agora mesmo

 <style type=text/css> [data de nascimento dos dados] { cor de fundo: #0f0;

 test.dataset.birthDate = '19890615';

Dessa forma, definimos o atributo personalizado data-nascimento-data por meio de JavaScript e adicionamos alguns estilos ao div na folha de estilos CSS para ver o efeito.

Ao ler, também é por meio do objeto dataset, usando . O prefixo data- também precisa ser removido e os hifens precisam ser convertidos em nomenclatura camel case.

 var teste = document.getElementById('test'); test.dataset.my = 'Byron' test.dataset.birthDate = '19890615'; + this.dataset.age+' '+this.dataset.birthDate }

Alguns alunos podem perguntar se há alguma diferença entre this e getAttribute/setAttribute exceto nomenclatura.

 var test = document.getElementById('test'); test.dataset.birthDate = '19890615'; log(test.getAttribute('data-age')); //24 console.log(test.getAttribute('data-nascimento')); //19890516 console.log(test.dataset.age); //24 console.log(test.dataset.sex);

A partir disso, podemos ver que ambos definem atributos como atributos (absurdo, caso contrário, eles podem chamá-los de atributos personalizados), o que significa que getAttribute/setAttribute pode operar em todo o conteúdo do conjunto de dados, e o conteúdo do conjunto de dados é apenas um subconjunto de atributos especiais. O problema é a nomenclatura, mas existem apenas atributos com o prefixo data- no conjunto de dados (não existe age=25).

Então, por que ainda usamos data-*? Uma das maiores vantagens é que podemos gerenciar todos os atributos personalizados de maneira unificada no objeto do conjunto de dados. É muito conveniente percorrer tudo sem ficar dispersos, por isso ainda é bom de usar.

A má notícia é que a compatibilidade do navegador data-* é muito pessimista.

1. Internet Explorer 11+
2. Cromo 8+
3. Firefox 6.0+
4. Ópera 11.10+
5. Safári 6+

Entre eles, o IE11+ está simplesmente cegando os olhos dos meus amigos. Parece que ainda há um longo caminho a percorrer para aproveitar plenamente esse atributo.

O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.