Regel in CSS Klasse ändern

[Auge]

Hallo

Die Ausgabe von

alert('cookie: ' + document.cookie + ', html: lang=' + document.getElementsByTagName("html")[0].lang);

lautet:

cookie: lang=en, html: lang=en

Nun müsste ich wahrscheinlich das Neu Rendern der Seite herbeiführen, um die Änderung auch sichtbar zu machen.

Nein. Wird der Wert von lang im DOM geändert, ist diese Änderung real und es werden andere CSS-Regeln gültig, wenn sie denn zutreffen. Ich nehm' mal ein Beispiel von mir. Das mag nicht unbedingt elegant sein, aber es funktioniert. Zum herumspielen sollte das Skript jedenfalls reichen.

/**
 * warte, bis das DOM geladen ist
 */
window.addEventListener("DOMContentLoaded", start, false);

/**
 * registriere den Event-Listener für das aside #function_bar,
 * das ein Formular enthält, welches wiederum Buttons enthält
 */
function start() {
var listen2Click = document.getElementById("function_bar");
listen2Click.addEventListener("click", switchClass, false);
listen2Click.setAttribute("class", "js");
}

/**
 * Nachimplementation der PHP-Funktion in_array() (Helferfunktion)
 */
function inArray(item, array) {
var arrayLen = array.length;
for (p = 0; p < arrayLen; p++) { if (array[p] == item) return true; }
return false;
}

/**
 * Werte den erfolgten Klick aus, vergleiche den Wert des
 * geklickten Buttons mit den erlaubten Werten (Variable `possTargets`)
 * und weise den Wert des Buttons, wenn er nach der Prüfung mit in_array()
 * als erlaubt gilt, als Klassenname dem HTML-Element „body“ zu.
 */
function switchClass(e) {
if (!e) e = window.event;
var klickTarget = e.target;
var targetName = "";
var possTargets = ["without_rework", "with_rework", "deletions"];
if (inArray(klickTarget.value, possTargets)) {
	targetName = klickTarget.value;
	} else {
	targetName = "";
	}
var htmlBody = document.getElementsByTagName("body");
//var classValue = htmlBody[0].getAttribute("class");
if (targetName.length > 0) {
	htmlBody[0].setAttribute("class", targetName);
	} else {
	htmlBody[0].removeAttribute("class");
	}
}

Je nach Klassenname werden in meinem Dokument Listenelemente anhand von CSS-Regeln unmittelbar ein- bzw. ausgeblendet. Ein Neuladen oder -rendern des Dokuments ist nicht notwendig.

.without_rework .need_rework,
.without_rework .obsolete,
.with_rework .no_problem,
.with_rework .obsolete,
.deletions .no_problem,
.deletions .need_rework {
display: none;
}

Ob nun body das Attribut class mit einem bestimmten Wert zugewiesen bekommt, oder html das Attribut lang mit einem ebenso bestimmten Wert, ist egal. Die konkreten CSS-Regeln werden nach dem Wechsel des Attributwertes (un)wirksam. Die Struktur des HTML-Dokuments muss natürlich so beschaffen sein, dass die CSS-Regeln zutreffen.

Ich müsste also entweder beim Klicken auf den Link auch das Neuladen erzwingen, oder eine andere Methode zum Neurendern finden, falls es die gibt.

Wie gesagt, wenn alle beteiligten Techniken zusammenspielen, ist das nicht notwendig.

Vom Prinzip ist das mit dem Neuladen ja ok, ich hätte es nur eleganter gefunden, darauf verzichten zu können, gerade in Hinblick auf mögliche mobile Nutzer.

Dann kannst du auch nach Sprachen gleich getrennte Inhalte ausliefern. Bei einer Änderung der Sprachangabe kannst du die neuen Inhalte ohne Reload der ganzen Seite mit AJAX nachladen.

Aber als elegant scheint mein Ansatz hier ja ohnehin nicht durchzugehen :)

Nee, elegant ist anders. :-)

Tschö, Auge