Artigo Introdução de wulin.com (www.vevb.com): A implementação de atributos personalizados no HTML5 não é tecnicamente complicada. A verdadeira dificuldade é se o método que você escolhe usar é adequado para o seu projeto; Se aplicável, como torná -lo mais eficaz? Lembre -se de que é muito cedo para ativar o método do conjunto de dados como uma função de página, afinal, muitos navegadores não suportam essa função.
O desenvolvimento do HTML5 está em pleno andamento, e o uso de atributos personalizados no HTML5 está gradualmente ganhando popularidade entre os desenvolvedores; Além disso, também desempenha um papel importante na semântica do desenvolvimento da Web. Neste artigo, exploraremos a criação e o acesso das propriedades de dados personalizadas HTML5, incluindo funções JavaScript, através de exemplos práticos.
Antes de usar o HTML5, primeiro adicione atributos personalizados ao elemento HTML e acesse -o através do JavaScript. Se você já tentou antes, descobrirá que é fácil ignorar a verificação de tags, e o HTML5 pode fornecer a função de criar e usar seus próprios atributos de elemento em uma página da Web válida.
Crie arquivos HTML5:
Se você não descobriu qual deles usar, pode copiar o seguinte código:
<! Doctype html>
<html>
<head>
<Cript>
/*Funções aqui*/
< /script>
</head>
<Body>
< /body>
</html>
Defina elementos personalizados no corpo e acesse -os usando elementos JavaScript em parte da área de script da cabeça.
Crie elementos:
Primeiro, adicione algum conteúdo simples e atributos personalizados, bem como elementos como IDs para que possamos reconhecer exemplos de JavaScript.
<div ID = Produto1 Data-Product-Category = Clothing>
Camisa de algodão
</div>
Como você pode ver, o atributo personalizado está na forma de: dados-*, defina o nome na seção de dados ou o nome que você selecionou. O uso de propriedades personalizadas no HTML5 é a única maneira de fazer isso. Portanto, se você deseja verificar se a página da web é válida, pode usar esse método.
Obviamente, a parte dos detalhes do projeto determina se uma propriedade personalizada é útil para você e como nomeá -la. Este exemplo pode ser aplicado a sites de varejo em diferentes categorias de produtos.
As propriedades personalizadas permitem usar o código JavaScript na página de uma maneira especial para definir elementos, como recursos de exibição de animação. Se não houver elementos HTML padrão, recomendamos o uso de propriedades personalizadas.
Adicione um botão de teste
O evento pode ser executado usando seus próprios elementos JavaScript na página, desde que o código a seguir seja adicionado à página:
<Tipo de entrada = Valor do botão = obtenha atributo onclick = getElementAttribute ('Product1')/>
Obtenha atributos:
A maneira mais comum de acessar propriedades no JavaScript é usar o GetAttributes, que também é a primeira etapa que precisamos fazer. Adicione a seguinte função na área de script da cabeça da página:
função getElementattribute (elemid) {
var theElement = document.getElementById (Elemid);
var theattribute = theElement.getAttribute ('Data-produto-categoria');
alerta (theattribute);
}
Aqui, adicionamos o valor de alerta ao exemplo e, é claro, você também pode adicioná -lo no script de acordo com suas próprias necessidades.
Obtenha dados:
Você pode usar conjuntos de dados de elementos em vez de DOM GetAttributes, o que pode ser mais eficiente, especialmente em alguns casos em que o código itera através de vários atributos, no entanto, o suporte do navegador para o conjunto de dados ainda é muito baixo; portanto, tendo isso em mente que esse código pode executar o mesmo processo que o método // por trás dele.
// var theattribute = theElement.getAttribute ('Data-Product-Category'); var theattribute = theElement.dataset.productcategory;
Remova dados- No conjunto de dados, começando com o nome do atributo, ele ainda está incluído no HTML.
Observe que, se você tiver um hífen em seu nome de propriedade personalizado, isso assumirá o formulário de camelo quando acessado através dos dados, ou seja, (a categoria de produto de dados se tornará uma categoria de produto).
Outros módulos e funções
Obtivemos essa propriedade e o script ainda pode ser definido e excluído. O código a seguir demonstra como definir propriedades usando módulos e conjuntos de dados JavaScript padrão.
Você também pode usar o método ou conjunto de dados DOM para excluir um determinado atributo:
// Método DOM
theElement.Removeattribute ('Data-productory-category');
// versão do conjunto de dados
theElement.dataset.productCategory = null;
Conclusão:
A implementação de propriedades personalizadas no HTML5 não é tecnicamente complicada. A verdadeira dificuldade é se o método que você escolhe usar é adequado para o seu projeto; Se sim, como você pode torná -lo mais eficaz? Lembre -se de que é muito cedo para ativar o método do conjunto de dados como uma função de página, afinal, muitos navegadores não suportam essa função.