JavaScript/DOM/Element/setAttribute
Die Methode Element.setAttribute setzt in einem Element einen Attributwert neu. Ist das Attribut bereits vorhanden, wird sein alter Wert durch den neuen ersetzt. Ist es noch nicht vorhanden, wird es neu angelegt und mit dem neuen Wert belegt.
Syntax
element.setAttribute(name, wert);
-
name
: Name des Attributs, das hinzugefügt oder geändert werden soll ( als Zeichenkette) -
wert
: der gewünschte neue Wert des Attributs.
Inhaltsverzeichnis
Anwendungsbeispiele
ausgegraute Felder durch Akzeptieren der AGB aktivieren
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('ablehnen').checked = true;
document.querySelector('#agb').addEventListener('click', weiter);
function weiter() {
if (document.getElementById('akzeptieren').checked == true) {
document.getElementById('persAngaben').removeAttribute('disabled');
}
if (document.getElementById('ablehnen').checked == true) {
document.getElementById('persAngaben').setAttribute('disabled','disabled');
}
}
});
setAttribute()
ist eine Methode des allgemeinen DOM (Kern-DOM). Wenn Sie auf Attribute von HTML-Elementen zugreifen möchten, brauchen Sie setAttribute()
strenggenommen nicht, denn das HTML-spezifische DOM definiert alle Attribute als Eigenschaften von Elementobjekten, auf die Sie direkt zugreifen können.
Das Setzen von Attributen über setAttribute() ist meist unnötig umständlich. Anstatt
element.setAttribute('disabled', value);
können Sie unter Verwendung des HTML-spezifischen DOM mit dem Punktoperator ebenso
element.disabled = value;
Passwort sichtbar machen
Damit niemand bei einem Blick über die Schulter das Passwort erfahren kann, zeigen Passwortfelder nicht die Eingabe, sondern nur Platzhalter an.
Oft ist man jedoch allein zuhaus, möchte sich aber vor dem Absenden vergewissern, ob die Eingabe richtig war.
<form>
<label for="email">E-Mail</label>
<input type="email" id="email" required placeholder="test@test.de">
<label for="passwd">Passwort</label>
<input type="password" id="passwd" required autocomplete="off">
<button id="check" type="button">Passwort sichtbar machen</button>
<button class="ok" type="submit">anmelden</button>
</form>
document.addEventListener('DOMContentLoaded', function () {
document.querySelector('#check').addEventListener('click', function () {
if (document.getElementById('passwd').type == 'password' ) {
document.getElementById('passwd').type = 'text';
this.innerText = 'Passwort verstecken';
}
else {
document.getElementById('passwd').type = 'password';
this.innerText = 'Passwort sichtbar machen';
}
});
});
Anstelle des Punktoperators können Sie auch setAttribute()
verwenden:
document.getElementById('passwd').setAttribute('type', 'text');
In dieser Funktion wird überprüft, ob der Akzeptieren-Radio-Button angeklickt wurde. Dann wird das ausgegraute fieldset aktiviert, indem das disabled-Attribut mit der Methode removeAttribute entfernt wird. Wenn der Benutzer wieder auf "Ablehnen" geht, wird das disabled-Attribut mit setAttribute wieder gesetzt.document.getElementById('ablehnen').checked = true;
setzt den Ablehnen-Button auch beim Neuladen wieder auf true , d. h. auf AGB ablehnen.Mit AddEventListener wird an das fieldset mit der id
persAngaben
ein Event-Handler angehängt, der bei einem Klick die Funktionweiter()
aufruft.