Dados de atributo personalizado do HTML5-* Introdução detalhada e exemplo de operação JS

Autor：Eve Cole Data da Última Atualização：2025-05-30 20:16:01

Comentário: O HTML5 adicionou um novo recurso aos atributos de dados personalizados, ou seja, dados de dados. No HTML5, podemos usar o prefixo com dados- para definir as propriedades personalizadas que precisamos para armazenar alguns dados

Obviamente, em navegadores avançados, você pode definir e acessar dados por meio de scripts. Muito útil na prática do projeto.

Por exemplo:

Use o método de atributo para acessar o valor do atributo de dados*

É muito conveniente usar o método de atributos para acessar o valor do atributo de dados* Custom:

// Use getAttribute para obter dados- atributo

VAR User = Document. getElementById ('usuário');

VAR Nome de usuário = Planta. getAttribute ('nome de dados'); // nome de usuário = 'script house'

var userID = planta. getAttribute ('dados-uid'); // userID = '12345'

// Use SetAttribute para definir propertias de dados

usuário. SetAttribute ('Data-site', 'http://www.vevb.com');

Este método funciona bem em todos os navegadores modernos, mas não é o atributo de dados personalizado do HTML 5 que é usado para uso, caso contrário, não será diferente dos atributos personalizados que usamos antes, por exemplo:

<Cript>

// Use getAttribute para obter dados- atributo

VAR User = Document. getElementById ('usuário');

VAR Nome de usuário = Planta. getAttribute ('uname'); // nome de usuário = 'script house'

var userID = planta. getAttribute ('uid'); // userID = '12345'

// Use SetAttribute para definir propertias de dados

usuário. SetAttribute ('Site', 'http://www.vevb.com');

</script>

Esse atributo "original" "original" não é diferente do atributo de dados acima-e os nomes de atributos do conhecimento são diferentes.

Atributo do conjunto de dados acessa o valor de dados-* atributo personalizado

Dessa forma, acessa o valor do atributo de conjunto de dados de um atributo de dados* acessando o atributo do conjunto de dados de um elemento. Esta propriedade do conjunto de dados faz parte da API HTML5 JavaScript e é usada para retornar um objeto DomStringMap com todos os atributos de dados do elemento selecionado.

Ao usar esse método, em vez de usar o nome de atributo completo, como o Data-UID, o prefixo de dados deve ser removido.

Outra nota especial é: se o nome do atributo de dados contiver hífen, por exemplo: data da data de nascimento, o hífen será removido e convertido em nomeação semelhante a um camelo. O nome do atributo anterior deve ser convertido: DateOfBirth.

<div data-id = "1234567890" data-name = "script house" data-date-of-birth> porta </div>

var el = document.QuerySelector ('#usuário');

console.log (el.id); // 'usuário'

console.log (el.dataSet); // um domstringmap

console.log (el.dataset.id); // '1234567890'

console.log (el.dataset.name); // 'script house'

console.log (el.dataset.dateofbirth); // '' '

el.dataset.dateofbirth = '1985-01-05'; // Defina o valor da data de dados da entrada.

console.log ('Somedataattr' em El.dataset); // false

el.dataset.somedataattr = 'mydata';

console.log ('Somedataattr' em El.dataset); // true

</script>

Se você deseja excluir uma propriedade de dados, pode fazer isso: Exclua EL. conjunto de dados. eu ia ; ou el .dataSet. id = null; .

Parece bonito, haha, mas infelizmente, o novo atributo do conjunto de dados é implementado apenas no Chrome 8+ Firefox (Gecko) 6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ Browers, portanto, o melhor uso GetAttribute e SetAttribute para operar durante esse período.

Sobre o seletor de propriedade de dados

No desenvolvimento real, você pode achar útil, pode selecionar elementos relacionados com base no seu atributo de dados personalizado. Por exemplo, use o querySelectorAll para selecionar elementos:

// Selecione todos os elementos que contêm o atributo 'Floring de dados'

documento. QuerySelectorAll ('[Data-flor]');

// Selecione todos os elementos com o valor de atributo 'Data-Text-Color' Red

documento. QuerySelectorAll ('[Data-text-colour = "Red"]');

Da mesma forma, também podemos definir estilos CSS para os elementos correspondentes através do valor do atributo de dados, como o exemplo a seguir:

.User {

Largura: 256px;

Altura: 200px;

}

.User [Data-name = 'Feiwen'] {

Cor: marrom

}

.User [Data-name = 'CSS'] {

Cor: vermelho

}

</style>