Posso adicionar um atributo personalizado a uma tag HTML?

348

Posso adicionar um atributo personalizado a uma tag HTML como a seguir?

<tag myAttri="myVal" />

html custom-attribute

— lovespring
fonte

3

stackoverflow.com/questions/432174/…

— Tamas Czinege

2

e também stackoverflow.com/questions/209428/…

— Tamas Czinege

possível duplicação de atributos personalizados - Sim ou não?

— Ciro Santilli escreveu

Embora as respostas digam "sim", verifique se você tem um conjunto temático de atributos que provavelmente não serão usados com plug-ins. por exemplo: "data-myuniqueattribute". Normalmente prefixo qualquer coisa depois de "dados" com algum tipo de abreviação de duas letras. por exemplo: "data-yscolumntype". Mantenha-o único.

189

Você pode alterar sua declaração! DOCTYPE (ou seja, DTD) para permitir isso, para que o documento [XML] ainda seja válido:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIEDsignifica que é um atributo opcional ou você pode usar #REQUIREDetc.

Mais informações estão em DTD - Atributos .

— carrilhão
fonte

2

basta colocar tudo isso na parte superior do seu arquivo html (assumindo XHTML 1.0 é ok)

— carillonator

8

Talvez esteja faltando alguma coisa, mas se você seguir essa abordagem, o]> aparecerá na página da web renderizada. Acontecendo comigo no Firefox 3.6. Este trecho de alistapart.com/articles/customdtd parece verificar esse comportamento: "Se você baixar os arquivos de amostra deste artigo e validar o arquivo internal.html, poderá ver por si mesmo. Infelizmente, quando o arquivo é exibido em um navegador ,]] aparece na tela. Não há como contornar esse bug, portanto, essa abordagem está correta. "

— 25311 Mike

3

Algumas coisas que podem ajudar nas aparências "]>": Salve o arquivo com uma extensão de arquivo .xhtml. Inclua o tipo MIME no arquivo com <meta http-equiv="content-type" content="application/xhtml+xml" />.

— LS

4

Declarar o atributo é inútil na medida em que o comportamento do navegador é considerado. Eles não leem o DTD. Além disso, eles não podem nem ignorar adequadamente o subconjunto interno (que é usado aqui), o que explica a medição "]>". A declaração seria relevante apenas para validação formal e não deve ser usada nas páginas de produção.

— Jukka K. Korpela

32

Esta resposta se aplica apenas a XHTML e HTML 4.01 e versões anteriores. Falta completamente que agora você pode criar seus próprios atributos se os prefixar data-.

— Brentonstrine

299

Você pode adicionar atributos personalizados aos seus elementos à vontade. Mas isso tornará seu documento inválido.

No HTML 5, você terá a oportunidade de usar atributos de dados personalizados com o prefixodata- .

— quiabo
fonte

169

Lembre-se de que "inválido" não significa nada. A página será renderizada 100% do tempo.

— 31415 John Farrell

22

Na verdade, "inválido" tem implicações muito reais. Por exemplo, ele pode colocar seu documento na renderização de modo quirks. De qualquer forma, use o doctype HTML5 e você será válido.

— Brentonstrine

Há uma boa tabela de diferentes tipos de documento e modos de navegador correspondentes aqui: hsivonen.fi/doctype/#handling . O doctype HTML5 alterna todos os navegadores pós-2001 para o modo Padrões (completos). XHTML Transitional e HTML 4 Transitional (especialmente sem DTD) doctypes não :)

— Ilya Streltsyn

santo doce cristo, obrigado. @ jfar certo, mas diminui a legibilidade.

— Nevermore

Meu documento é inválido de qualquer maneira, porque ele me diz que |não é permitido em um css href, mas isso é o que é necessário para o Google Fonts

— Pós Auto

73

Não, isso interromperá a validação.

No HTML 5, você pode / poderá adicionar atributos personalizados. Algo assim:

<tag data-myAttri="myVal" />

8

mas, não ligo para validação, só quero que ele possa ser acessado por javascript.

— lovespring

10

Funcionará, é claro. Mas criar deliberadamente documentos inválidos não é uma boa idéia.

31

Criar documentos inválidos é uma ótima ideia. O Google os cria para reduzir o tempo de carregamento, todos os sites que usam canvas os utilizam para criar uma melhor experiência do usuário, e o uso de estruturas javascript para extrair dados significativos de elementos html é muito mais fácil usando a técnica de atributo personalizado.

— 31515 John Farrell

3

@ jfar: Canvas não é inválido. Não está no HTML 4.01; no entanto, é uma parte perfeitamente legal da próxima especificação HTML5.

— BCAT

3

O que você quer dizer com "inválido"? Não faz parte de nenhuma especificação aceita. Como algo pode ser válido em relação a uma especificação que não existe?

— 31515 John Farrell

34

A data()função jQuery permite associar dados arbitrários a elementos DOM. Aqui está um exemplo .

— Draemon
fonte

11

Isso é dourado.

— Trevor Wood

11

@TrevorWood e quebrado (o link).

— Akash Agarwal

23

No HTML5: yes: use o atributo de dados .

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>

— Davide Andrea
fonte

5

Melhor autoridade: developer.mozilla.org/pt-BR/docs/Learn/HTML/Howto/…

— Zuks

11

Sim, você pode, você fez isso na própria questão: <html myAttri="myVal"/>.

— luvieere
fonte

2

Depende do que você define como HTML. Penso no HTML como uma linguagem baseada em SGML, com um conjunto específico de elementos e atributos. XHTML é uma variante do XML, com um conjunto específico de elementos e atributos muito parecidos com os do HTML. Quando você usa seus próprios atributos, ainda é SGML de XML, mas não é mais HTML de XHTML na minha opinião.

— Douwe Maan

Tome-o como uma extensão ad-hoc, não um padrão em sentido estrito, mas uma espécie de implementação do requisito de que não deve falhar na análise se contiver atributos personalizados.

— Luvieere 14/11/2009

2

DouweM: Claro, sempre há a serialização HTML do HTML5, que não é SGML nem XML.

— BCAT

2

E você quebrou (invalidou) o documento no processo. Não é uma boa prática.

— Carillonator

10

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar

<div id="demo" data-myvar="foo">anything</div>

Expandir snippet

— Jasim Droid
fonte

2

Por favor, adicione uma breve explicação à sua resposta.

— Nikolay Mihaylov

10

Sim, você consegue!

Tendo a próxima HTMLtag:

<tag key="value"/>

Podemos acessar seus atributos com JavaScript:

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter

Element.setAttribute()coloque o atributo na HTMLtag, se não existir. Portanto, você não precisa declará-lo no HTMLcódigo se quiser configurá-lo JavaScript.

key: pode ser qualquer nome que você deseja para o atributo, enquanto ainda não estiver sendo usado para a tag atual. value: é sempre uma string contendo o que você precisa.

— IgniteCoders
fonte

7

Você pode definir propriedades do JavaScript.

document.getElementById("foo").myAttri = "myVal"

— ewg
fonte

4

Aqui está o exemplo:

document.getElementsByTagName("html").foo="bar"

Aqui está outro exemplo de como definir atributos personalizados no elemento de tag do corpo:

document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";

Em seguida, leia o atributo:

attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2

Você pode testar o código acima no Console do DevTools, por exemplo

— kenorb
fonte

1

usar dados - qualquer, eu os uso bastante

<aside data-area="asidetop" data-type="responsive" class="top">

— Erick Boileau
fonte

Como você obtém data-*valores do JavaScript?

— Aaron Franke

0

Outra abordagem, que é limpa e manterá o documento válido, é concatenar os dados que você deseja em outra tag, por exemplo, id, e usar split para obter o que você deseja quando quiser.

<html>
<script>
  function demonstrate(){
    var x = document.getElementById("example data").querySelectorAll("input");
    console.log(x);
    for(i=0;i<x.length;i++){
      var line_to_illustrate = x[i].id  + ":" + document.getElementById ( x[i].id ).value;
      //concatenated values
      console.log("this is all together: " + line_to_illustrate); 
      //split values
      var split_line_to_illustrate = line_to_illustrate.split(":");
      for(j=0;j<split_line_to_illustrate.length;j++){
        console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
      }      
    }
  }
</script> 

<body>

<div id="example data">
  <!-- consider the id values representing a 'from-to' relationship -->
  <input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
  <input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
  <input id="3:6" type="number" name="quantity" min="0" max="9" value="5">  
</div>

<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>

</body>
</html>

— CAtoOH
fonte

0

Você pode adicionar, mas também precisa escrever uma linha de código JavaScript,

document.createElement('tag');

para garantir que tudo caia no lugar. Quero dizer Internet Explorer :)

— defau1t
fonte

3

Isso seria relevante se o nome da tag não fosse conhecido pelo IE. Aqui, o problema é um atributo personalizado, não uma tag personalizada; a palavra "tag" <tag ...>aqui significa aparentemente qualquer tag HTML.

— Jukka K. Korpela

Isso também não invalida o XHTML (a menos que seja uma marca reconhecida)?

— Paul

0

bem! você pode criar vários atributos HTML personalizados, disfarçando os atributos de dados do que você realmente deseja.

por exemplo.

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

Aparentemente, ele funciona, mas isso invalidaria seu documento. Não há necessidade de usar o JScript para que você tenha atributos personalizados ou até elementos, a menos que precise, basta tratar seus novos atributos formulados (personalizados) da mesma maneira que você trata seus documentos. atributo "data"

Lembre-se de "inválido" não significa nada. O documento carrega bem o tempo todo. e alguns navegadores realmente validariam seu documento apenas pela presença de DOCTYPE ....., você realmente entende o que quero dizer.

— Abdulbasit
fonte

-8

Você pode fazer algo assim para extrair o valor desejado do JavaScript, em vez de um atributo:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>

— Rã
fonte

Os atributos existem por um motivo; assim como as coisas <input type="hidden" value="...">. Considere, no entanto, a diferença entre o tipo de dados que você coloca em vários atributos, em contraste com os dados que você pode colocar em um campo oculto. Ocultar um <span>(de todas as coisas) de forma <a>a manter um pedaço de metadados não é uma boa jogada. Seria peculiar ao seu site e muito dependente do JS (degradação graciosa, pessoal).

— Jay Edwards