Czy mogę dodać niestandardowy atrybut do tagu HTML, taki jak poniżej?
<tag myAttri="myVal" />
Czy mogę dodać niestandardowy atrybut do tagu HTML, taki jak poniżej?
<tag myAttri="myVal" />
Odpowiedzi:
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>
]>
#IMPLIED
oznacza, że jest to opcjonalny atrybut lub możesz użyć #REQUIRED
itp.
Więcej informacji znajduje się w DTD - Atrybuty .
<meta http-equiv="content-type" content="application/xhtml+xml" />
.
data-
.
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-
.
|
jest dozwolone w css href
, ale to jest konieczne do czcionek Google
Nie, to przerwie sprawdzanie poprawności.
W HTML 5 możesz / będziesz mógł dodawać niestandardowe atrybuty. Coś takiego:
<tag data-myAttri="myVal" />
Funkcja jQuery data()
pozwala powiązać dowolne dane z elementami DOM. Oto przykład .
W HTML5: tak: użyj atrybutu data .
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
Tak, można, zrobiłeś to w samym pytaniem: <html myAttri="myVal"/>
.
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>
Tak, możesz to zrobić!
Posiadanie następnego HTML
tagu:
<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 HTML
znacznika, jeśli nie istnieje. Nie musisz więc deklarować tego w HTML
kodzie, 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.
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
używam danych - dowolne, często ich używam
<aside data-area="asidetop" data-type="responsive" class="top">
data-*
wartości z JavaScript?
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>
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 :)
<tag ...>
tutaj oznacza najwyraźniej dowolny tag HTML.
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.
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>
<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).