Attributen van tags wijzigen

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.

Op deze bladzijde wordt uit de doeken gedaan hoe je het voor elkaar kunt krijgen om attributen van tags door een JavaScript-function te laten wijzigen.
We beginnen met een voorbeeld.

Hieronder zie je een knop en een link. De link verwijst naar een website. Als je met de muis over de link gaat zie je in de statusbalk welke link dat is.
Als je op de knop klikt verandert de tekst van de link en ook de site waar naar wordt verwezen.
Het voorbeeld gebruikt een viertal diensten van Google.

Deze aanpak is handig als je de werking van een link wilt laten afhangen van een keuze van de gebruiker. Je kunt bijvoorbeeld iets uit een lijst laten kiezen en aan de hand daarvan met één link de gebruiker laten bevestigen dat hij wordt doorgestuurd naar een andere pagina binnen of buiten je website.

De code van het voorbeeld staat onderaan deze bladzijde. Je kunt hem ook downloaden om zelf te gebruiken.

• Er worden twee items besproken:
  1. De function setAttribute()
  2. Toepassen op je eigen site.
   
• Het script gebruikt de JavaScript function setAttribute(). Hiermee kun je de 'waarde' van een bestaand attribuut veranderen. Als het gewenste attribuut nog niet in de tag aanwezig is, wordt het attribuut toegevoegd aan de tag.
• De function is 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 3 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.

  
  
• 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')
   
• Behalve setAttribute() bestaan er nog drie functions, waarmee je de attributen in de tags kunt beheren vanuit JavaScript:
  
  • getAttribute(). Hiermee kun je de huidige waarde van een attribuut ophalen.
  • hasAttribute(). Hiermee kun je nagaan of een tag een attribuut heeft of niet.
  • removeAttribute(). Hiermee kun je bestaande attributen verwijderen.
  Beschrijving van deze functions is te vinden in het item Zelf attributen in tags maken en gebruiken.
   
• De code bestaat uit een stukje JavaScipt in de HEAD, en HTML in de BODY. Beide moet je aanpassen als je het zelf gaat gebruiken.
• Het JavaScript definieert twee Array's: DeLinks en DeTeksten. Hierin zet je de URL's en de bijbehorende link-teksten. Het aantal links is onbeperkt. DeLinks en DeTeksten moeten even lang zijn. De nummering moet aaneengesloten zijn en moet bij nul beginnen.
• De HTML-code is een link. De <A>-tag tag heeft id='AttributeDemo'. Het id wordt gebruikt in de JavaScript function LinkWijzigen() om aan deze tag te refereren.
• LinkWijzigen() gebruikt LinkWijzigen() om de link te wijzigen. De tekst op het scherm wordt veranderd door innerHTML te wijzigen.
• Het werken met innerHTML wordt beschreven in het item HTML dynamisch wijzigen.

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld op deze bladzijde ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<script>
// Definieer Arrays met links en teksten
var DeLinks = new Array(), DeTeksten = new Array();
DeLinks[0] = "https://www.google.nl";
DeTeksten[0] = "Zoeken met Google";
DeLinks[1] = "https://www.google.nl/maps";
DeTeksten[1] = "Google Maps";
DeLinks[2] = "https://mail.google.com";
DeTeksten[2] = "Google Mail";
DeLinks[3] = "https://www.google.com/analytics/";
DeTeksten[3] = "Google Analytics";
 
// Actie als op de knop wordt geklikt
var nn = DeLinks.length, ii = 0;
function LinkWijzigen() {
  ii++; if (ii>=nn) ii = 0;
  document.getElementById('AttributeDemo').setAttribute('href',DeLinks[ii])
  document.getElementById('AttributeDemo').innerHTML = DeTeksten[ii];
}
</script>

<table align="center" cellspacing="2" cellpadding="5" border="0"><tr>
<td align="right">
<a id="AttributeDemo" href="https://www.google.nl" target="NewBen" class="Kop2">Zoeken met Google</a></td>
<td>&nbsp;</td><!-- Dit is voor de opmaak -->
<td><button onClick="LinkWijzigen()" class="KopB">Verander de link</button></td>
</tr></table>

Downloaden:
 
Druk op de knop:  File: voorb218.zip, 725 bytes.