Czy mogę dodać niestandardowy atrybut do tagu HTML?

348

Czy mogę dodać niestandardowy atrybut do tagu HTML, taki jak poniżej?

<tag myAttri="myVal" />
html custom-attribute uwielbia wiosnę
źródło
3
stackoverflow.com/questions/432174/…
Tamas Czinege
2
a także stackoverflow.com/questions/209428/...
Tamas Czinege
możliwy duplikat atrybutów niestandardowych - tak czy nie?
Ciro Santilli 31 冠状 病 六四 事件 法轮功
Chociaż odpowiedzi mówią „tak”, upewnij się, że masz tematyczny zestaw atrybutów, które prawdopodobnie nie będą używane z wtyczkami. np .: „data-myuniqueattribute”. Zwykle poprzedzam wszystko po „danych-” pewnym rodzajem dwuliterowego skrótu. np .: „data-yscolumntype”. Zachowaj wyjątkowość.

Odpowiedzi:

189

Możesz zmienić swoją deklarację! DOCTYPE (tj. DTD), aby na to zezwolić, aby dokument [XML] nadal był ważny:

<!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>
]>

#IMPLIEDoznacza, że ​​jest to opcjonalny atrybut lub możesz użyć #REQUIREDitp.

Więcej informacji znajduje się w DTD - Atrybuty .

carillonator
źródło
2
po prostu umieść to wszystko na początku pliku HTML (zakładając, że przejście do xhtml 1.0 jest w porządku)
carillonator
8
Być może coś mi brakuje, ale jeśli zastosujesz się do tego podejścia,]> pojawi się na renderowanej stronie internetowej. Zdarza mi się to w Firefoksie 3.6. Ten fragment z alistapart.com/articles/customdtd wydaje się potwierdzać to zachowanie: „Jeśli pobierzesz przykładowe pliki do tego artykułu i zatwierdzisz plik internal.html, możesz to zobaczyć na własne oczy . Niestety, gdy wyświetlasz ten plik w przeglądarce ,]]> pojawia się na ekranie. Nie ma sposobu na obejście tego błędu, więc takie podejście jest gotowe ”.
Mike
3
Kilka rzeczy, które mogą pomóc w wyglądzie „]>”: Zapisz plik z rozszerzeniem .xhtml. Dołącz typ MIME do pliku za pomocą <meta http-equiv="content-type" content="application/xhtml+xml" />.
LS
4
Zadeklarowanie tego atrybutu jest bezcelowe, jeśli chodzi o zachowanie przeglądarki. Nie czytają DTD. Co więcej, nie mogą nawet poprawnie pominąć wewnętrznego podzbioru (który jest tutaj używany), co wyjaśnia meass „]>”. Deklaracja dotyczyłaby tylko formalnej weryfikacji i nie powinna być stosowana na stronach produkcyjnych.
Jukka K. Korpela,
32
Ta odpowiedź dotyczy tylko XHTML i HTML 4.01 i starszych. Całkowicie tęskni za tym, że możesz teraz tworzyć własne atrybuty, jeśli je poprzedzisz data-.
brentonstrine
299

Możesz dowolnie dodawać niestandardowe atrybuty do swoich elementów. Ale to spowoduje, że twój dokument będzie nieważny.

W HTML 5 będziesz miał możliwość użycia niestandardowych atrybutów danych z prefiksemdata- .

Gumbo
źródło
169
Pamiętaj, że „nieprawidłowy” nic nie znaczy. Strona będzie dobrze renderowana w 100% przypadków.
John Farrell,
22
W rzeczywistości „nieprawidłowy” ma implikacje bardzo realne. Np. Może umieścić twój dokument w trybie quirksmode. W każdym razie skorzystaj z dokumentu HTML5, a będziesz ważny.
brentonstrine
Jest tu dobra tabela różnych typów dokumentów i odpowiadających im trybów przeglądarki: hsivonen.fi/doctype/#handling . Doctype HTML5 przełącza wszystkie przeglądarki po 2001 roku w tryb (Pełny) Standardy. Dokumenty przejściowe XHTML i przejściowe HTML 4 (szczególnie bez DTD) nie :)
Ilya Streltsyn
Święty słodki Chrystus, dziękuję. @ jfar w prawo, ale zmniejsza czytelność.
Nevermore,
Mój dokument i tak jest nieprawidłowy, ponieważ mówi mi, że nie |jest dozwolone w css href, ale to jest konieczne do czcionek Google
Post Self
73

Nie, to przerwie sprawdzanie poprawności.

W HTML 5 możesz / będziesz mógł dodawać niestandardowe atrybuty. Coś takiego:

<tag data-myAttri="myVal" />

źródło
8
ale nie dbam o sprawdzanie poprawności, chcę tylko, żeby można było uzyskać do niej dostęp za pomocą javascript.
lovespring
10
Oczywiście to zadziała. Ale celowe tworzenie nieważnych dokumentów nie jest tak dobrym pomysłem.
31
Tworzenie nieważnych dokumentów to świetny pomysł. Google tworzy je, aby skrócić czas wczytywania, każda strona wykorzystująca płótno wykorzystuje je, aby zapewnić lepszą obsługę, a korzystanie z ram javascript do pobierania znaczących danych z elementów HTML jest znacznie łatwiejsze dzięki technice atrybutów niestandardowych.
John Farrell,
3
@jfar: Canvas nie jest nieprawidłowy. Nie ma go w HTML 4.01; jest to jednak całkowicie legalna część nadchodzącej specyfikacji HTML5.
bcat
3
Co masz na myśli mówiąc „nieważny”? Nie jest częścią żadnej zaakceptowanej specyfikacji. Jak coś może być poprawne względem specyfikacji, która nie istnieje?
John Farrell,
34

Funkcja jQuery data()pozwala powiązać dowolne dane z elementami DOM. Oto przykład .

Draemon
źródło
1
To jest złote.
Trevor Wood,
1
@TrevorWood and broken (link).
Akash Agarwal
11

Tak, można, zrobiłeś to w samym pytaniem: <html myAttri="myVal"/>.

luvieere
źródło
2
Zależy od tego, co definiujesz jako HTML. Myślę o HTML jako języku opartym na SGML, z określonym zestawem elementów i atrybutów. XHTML jest odmianą XML, z określonym zestawem elementów i atrybutów, które są bardzo podobne do HTML. Kiedy używasz własnych atrybutów, nadal jest to SGML XML, ale moim zdaniem już nie HTML HTML XHTML.
Douwe Maan
Potraktuj to jako rozszerzenie adhoc, a nie standard w ścisłym tego słowa znaczeniu, ale coś w rodzaju implementacji wymagania, że ​​nie powinien zawieść parsowania, jeśli zawiera niestandardowe atrybuty.
luvieere
2
DouweM: Oczywiście zawsze istnieje serializacja HTML HTML5, która nie jest ani SGML, ani XML.
bcat
2
W trakcie procesu złamałeś (unieważniłeś) dokument. Nie dobra praktyka.
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>
Rozwiń fragment kodu

Jasim Droid
źródło
2
Dodaj krótkie wyjaśnienie do swojej odpowiedzi.
Nikolay Mihaylov
10

Tak, możesz to zrobić!

Posiadanie następnego HTMLtagu:

<tag key="value"/>

Możemy uzyskać dostęp do ich atrybutów za pomocą JavaScript:

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

Element.setAttribute()wstaw atrybut do HTMLznacznika, jeśli nie istnieje. Nie musisz więc deklarować tego w HTMLkodzie, jeśli chcesz to ustawić JavaScript.

key: może być dowolną nazwą atrybutu, która nie jest jeszcze używana w bieżącym tagu. value: zawsze jest to ciąg zawierający to, czego potrzebujesz.

IgniteCoders
źródło
7

Możesz ustawić właściwości z JavaScript.

document.getElementById("foo").myAttri = "myVal"
ewg
źródło
4

Oto przykład:

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

Oto kolejny przykład ustawiania niestandardowych atrybutów w elemencie tagu treści:

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

Następnie przeczytaj atrybut przez:

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

Możesz przetestować powyższy kod w konsoli w DevTools, np

JS Console, DevTools w Chrome

kenorb
źródło
1

używam danych - dowolne, często ich używam

<aside data-area="asidetop" data-type="responsive" class="top">
Erick Boileau
źródło
Jak uzyskać data-*wartości z JavaScript?
Aaron Franke,
0

Innym podejściem, które jest czyste i pozwala zachować ważność dokumentu, jest połączenie danych, które chcesz, w inny znacznik, np. Id, a następnie użycie podziału, aby wziąć to, co chcesz, kiedy chcesz. 

<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
źródło
0

Możesz dodać, ale musisz też napisać wiersz kodu JavaScript,

document.createElement('tag');

aby upewnić się, że wszystko się ułoży. Mam na myśli Internet Explorera :)

defau1t
źródło
3
Byłoby to istotne, jeśli nazwa znacznika nie jest znana IE. Tutaj problemem jest atrybut niestandardowy, a nie tag niestandardowy; słowo „tag” <tag ...>tutaj oznacza najwyraźniej dowolny tag HTML.
Jukka K. Korpela,
Czy to również nie unieważnia XHTML (chyba że jest to rozpoznany tag)?
Paul
0

dobrze! możesz faktycznie stworzyć zestaw niestandardowych atrybutów HTML, ukrywając atrybuty danych w tym, czego naprawdę chcesz.

na przykład. 

[attribute='value']{
color:red;
}
<span attribute="value" >hello world</span>

Najwyraźniej działa, ale to unieważniłoby twój dokument, nie ma potrzeby używania JScript, aby mieć niestandardowe atrybuty, a nawet elementy, chyba że musisz, musisz tylko traktować swoje nowe sformułowane (niestandardowe) atrybuty tak samo, jak traktujesz swoje atrybut „dane”

Pamiętaj, że „nieprawidłowy” nic nie znaczy. Dokument będzie ładował się poprawnie przez cały czas. a niektóre przeglądarki faktycznie sprawdzają twój dokument tylko przez obecność DOCTYPE ..... tak naprawdę wiesz o co mi chodzi.

Abdulbasit
źródło
-8

Możesz zrobić coś takiego, aby wyodrębnić pożądaną wartość z JavaScript zamiast atrybutu:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
Żaba
źródło
Atrybuty istnieją z jakiegoś powodu; jak rzeczy<input type="hidden" value="..."> . Zastanów się jednak nad różnicą między typem danych, które umieszczasz w różnych atrybutach, w przeciwieństwie do danych, które możesz umieścić w ukrytym polu. Ukrywanie <span>(wszystkich rzeczy) w <a>celu zachowania fragmentu metadanych nie jest dobrym posunięciem. Byłoby to specyficzne dla twojej witryny i bardzo zależne od JS (wdzięczna degradacja, ludzie).
Jay Edwards,