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:
<div id = "user" uid = "12345" uname = "script house"> </div>
<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>
<script type = "text/javascript">
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:
<style type = "text/css">
.User {
Largura: 256px;
Altura: 200px;
}
.User [Data-name = 'Feiwen'] {
Cor: marrom
}
.User [Data-name = 'CSS'] {
Cor: vermelho
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen"> 1 </div>
<div class = "user" data-id = "124" data-name = "css"> pier </div>