Zelf attributen in tags maken en gebruiken

HTML bestaat uit tekst en tags. Tags zijn codes waardoor de browser weet hoe de pagina moet worden opgemaakt, welke plaatjes worden gebruikt en waar die staan, hyperlinks, enz.

Tags bevatten attributen. Dat zijn specificaties binnen een tag. De attributen die standaard bij een tag beschikbaar zijn zijn vastgelegd in de HTML-standaard, zie bijvoorbeeld W3Schools.com.

In veel tags zijn attributen noodzakelijk om het gestelde doel te bereiken. Het meest sprekende voorbeeld is de <A>-tag, waarmee hyperlinks worden gemaakt. Zonder het attribuut href kan de link niet worden gemaakt.
Er zijn ook toepassingen denkbaar waarin het handig is om je eigen attributen in een tag te zetten, waarna je website er op kunt laten reageren. Een voorbeeld daarvan vind je in het item Maak je eigen context-menu.

Elders op deze site wordt uitgelegd hoe je bestaande standaard-attributen kunt wijzigen. Zie het item Attributen van tags wijzigen.
Op deze bladzijde wordt uitgelegd hoe je je eigen attributen definieert en gebruikt.

• Besproken wordt:
  1. Zelf een attribuut maken in HTML
  2. Zelf een attribuut maken met JavaScript
  3. Een attribuut wijzigen met JavaScript
  4. Een attribuut verwijderen met JavaScript
  5. De waarde van een attribuut uitlezen met JavaScript
  6. Onderzoeken of een attribuut bestaat in een tag met JavaScript
   
• Je maakt zelf een attribuut in HTML door het gewoon in een tag te zetten. Geef het attribuut een naam die je zelf kiest, maar die beter niet in de HTML-standaard moet worden genoemd.
  
  • Als de naam wel in de standaard voorkomt zal de browser hem (proberen te) gebruiken. De diverse browsers kunnen hier verschillend op reageren, wat tot vreemde zij-effecten kan leiden.
  • Als de naam niet in de standaard voorkomt zal de browser die negeren. Je hebt je eigen attribuut dus helemaal voor jezelf. Zij-effecten zullen niet optreden.
• In JavaScript maak je een attribuut met de function setAttribute(). Deze function gebruik je ook om een attribuut te wijzigen.
  Als het gewenste attribuut nog niet in de tag aanwezig is, wordt het attribuut toegevoegd aan de tag. Anders wordt het attribuut overschreven.
• In JavaScript verwijder je een attribuut met de function removetAttribute().
• Om na te gaan of een tag een attribuut heeft gebruik je de JavaScript function hasAttribute()
• Om de waarde van een attribuut uit te lezen gebruik je de JavaScript function getAttribute()
   
• De functions zijn gemaakt voor gebruik met HTML- en XML-tags.
• Behalve voor de bovenstaande tags kan setAttribute() ook worden gebruikt voor het aanpassen de van STYLE-attributen die onderdeel zijn van een tag, bijvoorbeeld color en font-weight in: <p style="color:green;font-weight:bold">.
   
• De function setAttribute() heeft 2 parameters:
   

  Naam:		Betekenis:
  sName		Moet worden opgegeven. Dit is de naam van het attribuut dat moet worden veranderd. Een uitzondering is als je het attribuut class wilt veranderen. Dan gebruik je de bestaande waarde van class. Dus als je class="Kop1" wilt veranderen in class="Voet2" is de aanroep:    setAttribute("Kop1","Voet2").
  vValue		Moet worden opgegeven. Dit is de waarde die het attribuut sName moet krijgen.

  
  
• setAttribute() geeft géén waarde terug.
   
• De function removeAttribute() heeft 1 parameter:
   

  Naam:		Betekenis:
  sName		Moet worden opgegeven. Dit is de naam van het attribuut dat moet worden verwijderd. Een uitzondering is als je het attribuut class wilt verwijderen. Dan gebruik je de bestaande waarde van class. Dus als je class="Kop1" wilt verwijderen is de aanroep:    removeAttribute("Kop1").

  
  
• removeAttribute() geeft géén waarde terug.
   
• De function getAttribute() heeft 1 parameter:
   

  Naam:		Betekenis:
  sAttrName		Moet worden opgegeven. Dit is de naam van het attribuut waarvan de waarde moet worden opgehaald. Een uitzondering is als je het attribuut class wilt ophalen. Dan gebruik je de bestaande waarde van class. Dus als je class="Kop1" wilt ophalen is de aanroep:    getAttribute("Kop1").

  
  
• getAttribute() geeft de waarde van het gevraagde attribuut terug. Afhankelijk van het attribuut is dat een string, een number of een boolean (true/false).
  Als er een fout is opgetreden retourneert getAttribute() de waarde null.
   
• De function hasAttribute() heeft 1 parameter:
   

  Naam:		Betekenis:
  sAttrName		Moet worden opgegeven. Dit is de naam van het attribuut waarvan wordt onderzocht of het bestaat in de tag.

  
  
• hasAttribute() geeft true terug als de tag het attribuut heeft, anders false.
   
• In het algemeen geldt:
  
  • Gebruik geen dubbele attributen. Verschillende spellingswijzen met hoofd- en kleine letters moet je vermijden.
  • Gebruik gaan namen als waarden. Attributen zoals url="url" en name="name" is vragen om problemen. Met name getAttribute() wil nog wel eens problemen geven als je namen en waarden gelijk maakt.
• Een slimme benadering om dit te gebruiken is door in de tag een id op te nemen, en dat te gebruiken om de betreffende tag mee te benaderen, bijvoorbeeld:
   
  
  document.getElementById('Demo').setAttribute('target','_blank')

Gebruik:

• De code staat in de <HEAD> of in de <BODY>.

De code ziet er bijvoorbeeld als volgt uit:
 
(Zet dit waar je het nodig hebt).
<a href="https://www.webmasterij.nl" id="Demo" target="NewBen">Deze link is een voorbeeld</a>

<script>
var xx = document.getElementById('Demo');
if (xx.hasAttribute('target') xx.setAttribute('name','Voorbeeld');
if (xx.hasAttribute('name') var aa = getAttribute('name');
var bb = xx.getAttribute('href');
</script>