Quais são os atributos personalizados em html?

Abaixo está a descrição da sintaxe:

• elemento: Este pode ser qualquer elemento HTML, como

  ,

  , ou mais.

• dados-*: Este é um atributo personalizado, onde "*" representa o nome do atributo.
• valor: Isso pode ser qualquer valor de string e deve estar em letras minúsculas.

Como criar atributos personalizados em html?

Primeiro, adicione um elemento div com o nome da classe “conteúdo principal”Em html. Adicione um HTML

Elemento para o cabeçalho deste elemento div. Então, para fazer uma lista não ordenada, utilize o HTML

marcação. Especifique os itens da lista incluindo o
• Tag.

  Analisar o trenó de código abaixo onde cada um

• O elemento está associado aos seguintes atributos:
  • ONCLICK: Este é o atributo de evento OnClick e funciona quando o elemento é clicado.
  • eu ia: Este atributo define um ID exclusivo para os elementos.
  • grau de dados: Este é o atributo personalizado, “dados-”Especifica o atributo de dados e“nota”É o nome do atributo personalizado.

  O "ONCLICK”Atributo dentro de cada

• elemento tem um valor “ShowGrade (isto)”, Que é uma função. Esta função é invocada enquanto o elemento é clicado. A palavra -chave “esse”É utilizado para se referir a um objeto. O "eu ia”Atributo define um ID exclusivo para cada
• elemento. O atributo de dados “grau de dados”Contém valores diferentes.

  Aqui está o trecho de código que representa o cenário acima explicado:

  
  

  Notas de teste

  
  
  
  
  • 
    Lisa
    
  
  
  • 
    Jack
    
  
  
  • 
    Margarida
    
  
  
  • 
    Jony
    
  
  
  
  

  Agora, vamos para a parte JavaScript para manipular a função especificada no atributo de evento OnClick.

  JavaScript

  • No código acima mencionado, o “ShowGrade ()”A função é definida com o parâmetro“ aluno ”.
  • Em seguida, crie uma variável “nota”E obtenha o valor do atributo utilizando o“getAttribute ()”.
  • Depois disso, gerar uma mensagem de alerta para o resultado.

  Saída
  

  Como acessar os atributos personalizados usando a propriedade do conjunto de dados?

  No mesmo código HTML, utilize a palavra -chave do conjunto de dados e mencione o nome do atributo personalizado sem espaço entre. Por exemplo, mencionaremos o atributo personalizado “Tipo de laptop de dados”E adicione seu valor conforme necessário:

  
  

  Linguagens de programação

  
  
  
  
  • 
    Desenvolvimento de front -end
    
  
  
  • 
    Fazendo servidores da Web
    
  
  
  • 
    Web dinâmica e interativa
    
  
  
  • 
    Desenvolver navegadores, sistemas operacionais
    
  
  
  
  

  JavaScript

  • O "função”É a palavra -chave utilizada antes da função.
  • No código acima mencionado, o “ShowGrade ()”A função é definida com o parâmetro“computador portátil”.
  • Em seguida, crie uma variável “Laptoptóteo”E obtenha o valor de atributo personalizado, utilizando o“computador portátil.conjunto de dados.Laptoptóteo”.
  • Depois disso, gerar um alerta para exibir o valor recuperado do atributo personalizado correspondente.

  Saída
  

  Como estilizar atributos personalizados no CSS?

  Também podemos aplicar propriedades de estilo CSS diferentes aos atributos personalizados. Para acessar o atributo de dados no CSS, siga a sintaxe:

  elemento [dados-*= 'value']
  Propriedades do CSS
  

  Agora, altere o plano de fundo de cada um dos atributos personalizados usando a propriedade CSS em segundo plano.

  Estilo “Data-Laptop-Type” com valor “HTML/CSS”:

  li [data-laptop-type = 'html/css']
  Background-Color: RGB (199, 158, 240);
  

  Estilo “Data-laptop-tipo” com valor “JavaScript”

  Li [Data-Laptop-Type = 'JavaScript']
  cor de fundo: RGB (158, 221, 240);
  

  Estilo “tipo de laptop de dados” com valor “php”

  Li [Data-laptop-type = 'php']
  Background-Color: RGB (250, 161, 243);
  

  Estilo "Tipo de laptop de dados" com valor "C ++"

  Li [Data-laptop-Type = 'C ++']
  Background-Color: RGB (212, 248, 154);
  

  Saída

  Vamos nos mover ainda mais para estilizar a aparência da página HTML.

  Divis de estilo “Principal”

  .conteúdo principal
  Largura: 600px;
  Altura: 300px;
  margem: automático;
  

  O ".conteúdo principal”É utilizado para acessar o elemento div ter a classe“ Conteúdo principal ”. As seguintes propriedades são aplicadas a ele:

  • ““largura”Propriedade define a largura do elemento.
  • ““altura”Propriedade define a altura do elemento.
  • ““margem”A propriedade adiciona espaço ao redor do elemento.

  Elemento de estilo “li”

  .Conteúdo principal li
  Size da fonte: 25px;
  margem: 2px;
  preenchimento: 5px;
  

  O

• O elemento é estilizado com estas propriedades:
  • ““tamanho da fonte”A propriedade é utilizada para definir o tamanho da fonte do elemento.
  • ““preenchimento”Propriedade define espaço em torno do conteúdo do elemento ou dentro da borda do elemento.

  Estilo H2 elemento

  H2
  Decoração de texto: 5px Overline Green;
  

  O elemento H2 é aplicado com o “decoração de texto”Propriedade com a“5px" espessura da linha, "Overline”Tipo de linha e a cor“verde”.

  Aqui está a análise final da nossa página da web:

  Isso se tratava de criar e usar atributos personalizados em html.

  Conclusão

  No HTML, os atributos personalizados adicionam informações adicionais aos elementos HTML, especificados com o prefixo “dados-" como "grau de dados”. O agente do usuário ignora o prefixo “dados-”. Existem vários métodos para acessar os atributos personalizados em JavaScript, como getAttribute (), setAttribute (), conjunto de dados e muito mais. Esta redação forneceu um guia abrangente sobre a criação, acesso, uso e estilo de atributos personalizados no HTML.