Javascript: auf class zugreifen, src von img ändern [teilweise gelöst]

[sabermaul]

Hi,

ich versuche bereits seit geraumer Zeit, mit Javascript den Link (src) eines Bildes zu ändern. Der img-Tag hat jedoch ein class, kein id.

#Edit: Ist zwar nicht optimal (Verbesserungsvorschlag erwünscht), klappt aber soweit.

// ==UserScript==
// @name           ****
// @namespace      cc
// @description    Bild
// @include        ****index.php
// document.write("");
// ==/UserScript==
function classErkennen() {
	var allElems = document.getElementsByTagName('img');
	for (var i = 0; i < allElems.length; i++) {
		var thisElem = allElems[i];
		if (thisElem.className && thisElem.className == 'layout') {
			thisElem.src = 'layoutWinter.jpg';
		}
	}
}

function ausfuehren() {
	if(document.getElementById('layout')) {
		classErkennen()
	}
}
ausfuehren();

Jetzt klappts. Hab vergessen die Methode auch aufzurufen...

Hab mal kurz zusammengefasst und unnötiges gelöscht, hoffe das hilft mal anderen.

 

[Kasn]

frage: wieso nimmst du keine fertige javascript bibliothek? dann kannst du das super einfach per css selector machen.

ansonsten ist dein ansatz schon ok so. "Zu Fuss" geht wohl nicht besser. Aktuelle Browser koennen aber noch document.getElementsByClassName() was das ganze wohl etwas einfacher macht. kommt auf die Zielgruppe an.

 

[sabermaul]

frage: wieso nimmst du keine fertige javascript bibliothek? dann kannst du das super einfach per css selector machen.

Wusste ich nicht, dass es so was gibt. Hab da wohl nach den falschen Stichworten gesucht.

Habs jetzt noch mal neu geschrieben (mit klarem Kopf):

function KlasseFinden(gesClass) {
	var alleClass = document.getElementsByClassName(gesClass);
	for (var i = 0; i < alleClass.length; i++) {	
		var dieseKlasse = alleClass[i];
		if (dieseKlasse.className && dieseKlasse.className == gesClass) {
			return dieseKlasse;
		}
	}
}
KlasseFinden('layout').src = 'layoutWinter.jpg';

 

[Kasn]

das liefert dir so aber nur das erste gefundene element zurueck. Ausserdem brauchst du die Pruefung auf "dieseKlasse.className == gesClass" nicht weil du das ja schon durch das getElementsByClassName() sicherstellst. Zumal es nicht mehr zutrifft wenn das Element mehrere Klassen hat.
Und wenn du wirklich nur das erste willst kann du dir die schleife sparen und gleich auf "alleClass[0].src" arbeiten.
Zu Thema Javascript Bibliotheken:

Am einfachsten zum lernen ist wohl Prototype. Da muss man sich am wenigsten mit befassen. Wenn du dich mehr einarbeiten willst dann wuerde ich zu jQuery greifen.

Spoiler

Grad echt peinlich, ich wuesste garnicht wie man das ohne diese ganzen Bibliothen ordentlich macht. Da fuehl ich mich ja fast aputiert

 

[sabermaul]

das liefert dir so aber nur das erste gefundene element zurueck. Ausserdem brauchst du die Pruefung auf "dieseKlasse.className == gesClass" nicht weil du das ja schon durch das getElementsByClassName() sicherstellst. Zumal es nicht mehr zutrifft wenn das Element mehrere Klassen hat.

Joa, so genau hab ich nicht geschaut, was ich da schreib... wenns mal nicht mehr läuft, werde ich es ändern und mit eine Bibliothek arbeiten.

#Edit: Jetzt weiß ich wieder, weshalb ich ..byTagName('*') drin hatte...

function KlasseFinden(gesClass) {
	var alleElemente = document.getElementsByTagName('*');
	for (var i = 0; i < alleElemente.length; i++) {
		var diesesElement = alleElemente[i];
		if (diesesElement.className && diesesElement.className == gesClass) {
			diesesElement.src = 'layoutWinter.jpg';
		}
	}
}
KlasseFinden('layout');

 

[Kasn]

na so ist das ja ultra ineffektiv. So kriegst du alle elemente die eine Klasse haben. das ist ja eher nicht sinn der sache

 

[sabermaul]

Mein Rechner schaffts noch xD
Nein, im ernst. Du merkst, dass ich von Javascript nicht viel Ahnung habe. Da meine Zeit gerade kostbar ist und im nächsten halben Jahr auch nicht besser wird (Fachabitur) muss es fürs Erste reichen.
Solltest Du Lust haben, mir die paar Zeilen effizienter/besser zu schreiben wäre ich dir natürlich dankbar, aber mit byTagName('img') wirds ja schon effizienter. Ich hab leider echt keine Zeit mich noch mehr reinzudenken oder eine weitere Sprache zu lernen und dann in der Prüfung durcheinander zu kommen.