Attribute

02.12.2016 10:31 Uhr

setAttribute, getAttribute und removeAttribute erzeugen, lesen und ändern HTML-Attribute von class, style über src und href bis value konsistent und sicher.

setAttribute()


HTML

<section  onclick="setAtt();" id="mySection">
	    Text.</section>

JS

function setAtt() {
var elem = document.getElementById('mySection');
	var att = elem.setAttribute('class', 'blue');
}

CSS

.blue {
	    color: blue;
	}

Dem section-Element mit der ID ‚mySection‘ wird die Klasse ‚blue‘ zugewiesen, welche im CSS definiert ist.

removeAttribute()


HTML

<section onclick="remAtt();" id="mySection">
	    Content.<br></section>

JS

function remAtt() {
var elem = document.getElementById('mySection');
	var att = elem.removeAttribute('class');
}

CSS

.rot {
	    color: red;
	}

Das class-Attribut wird durch diesen Befehl entfernt.

getAttribute()


HTML

<section onmouseover="getAtt();" id="mySection">
	    Inhalt.<br>
	     </section>

JS

function getAtt() {
var elem = document.getElementById('mySection').getAttribute('style');
    var att = elem.getAttribute('style');
}

CSS

.rot {
	    color: red;
	}

Der Variable att wird hier der Inhalt des style-Attributs zugewiesen: ‚color: red;‘


Weitere Informationen zu den einzelnen Attributen finden Sie hier.

vorherige Folie / nächste Folie

Schlagwörter: