Antworten zum Thema „Javascript Script vereinfachen/verallgemeinern“

[Coulyo]

Hallo,

ich habe vor kurzem angefangen mich mit Javascript zu beschäftigen und habe nun mein erstes eigenes Script geschrieben. Ich ändere damit das Farb-Schema meiner Website. Das ganze funktioniert auch ganz gut, allerdings denke ich, dass man es noch wesentlich verbessern könnte, indem man die Funktion allgemein gestaltet, um das Script auch in zukünftigen Projekten verwenden zu können.
Ich könnte aus dem unten stehenden Code 3 oder 4 allgemeine Funktionen machen, um jeden Fall abzudecken. Das hätte dann aber den Nachteil, dass ich um das Farbschema anzupassen, alle diese Funktionen aufrufen müsste, anstatt nur die Funktion changeColor().
Ich würde das Script also gerne so umschreiben, dass der Methode changeColor() entweder ein Class Name oder ein Tag Name übergeben wird. Dann müsste ja geprüft werden, was der Methode als Parameter übergeben wurde und davon ausgehend möchte ich dann in der Funktion weitere Abfragen machen im Stil von:

wenn class xy das BackgroundImage grau90.png hat, dann änder das bitte in weiß90.png

Oder equivalent mit der Schriftfarbe.

So, nun hab ich aber keine Ahnung, wie ich das zu Stande bringe. Aus Java ist mir das überladen von Methoden bekannt, mit dem man ja zumindest das Übergeben verschiedener Parametertypen an die Funktion lösen könnte (auch wenn es dann faktisch trotzdem mehrere Funktionen mit dem selben Namen wären), allerdings weiß ich nicht, ob sowas auch in Javascript geht.
Zweitens weiß ich nicht wie man oben genannte Abfrage für das Hintergrundbild, oder die Schriftfarbe, oder eine beliebige andere Eigenschaft im Code formuliert.

Ich hoffe ich habe mich einigermaßen verständlich ausgedrückt und irgendjemand kann mir helfen! Ich bin mir ziemlich sicher, dass das Problem für Kenner ein Klacks ist, aber als Anfänger ...

Danke schonmal!

<script type="text/javascript">
	
	var change = 0;
	
	function changeColor(){
		
		if(change == 0){
			
		for (var i = 0; i < document.getElementsByTagName("div").length; i++){
			document.getElementsByTagName("div")[i].style.backgroundImage = "url('img/weiß90.png')";
		}
		for (var i = 0; i < document.getElementsByClassName("navigation").length; i++){
			document.getElementsByClassName("navigation")[i].style.backgroundImage = "url('img/weiß90.png')";
		}
		for (var i = 0; i < document.getElementsByClassName("navLink").length; i++){
			document.getElementsByClassName("navLink")[i].style.color = "#000";
		}
		for (var i = 0; i < document.getElementsByClassName("navLinkSub").length; i++){
			document.getElementsByClassName("navLinkSub")[i].style.backgroundImage = "url('img/weiß90.png')";
			document.getElementsByClassName("navLinkSub")[i].style.color = "#333";
		}
		for (var i = 0; i < document.getElementsByClassName("divider").length; i++){
			document.getElementsByClassName("divider")[i].style.backgroundImage = "none";
		}
		for (var i = 0; i < document.getElementsByClassName("blogHeading").length; i++){
			document.getElementsByClassName("blogHeading")[i].style.backgroundImage = "none";
		}
		for (var i = 0; i < document.getElementsByTagName("p").length; i++){
			document.getElementsByTagName("p")[i].style.color = "#333";
		}
		for (var i = 0; i < document.getElementsByTagName("span").length; i++){
			document.getElementsByTagName("span")[i].style.color = "#333";
		}
		
		for (var i = 0; i < document.getElementsByClassName("datumLarge").length; i++){
			document.getElementsByClassName("datumLarge")[i].style.backgroundImage = "none";
		}
		for (var i = 0; i < document.getElementsByClassName("date").length; i++){
			document.getElementsByClassName("date")[i].style.color = "#FFF";
		}
		
		change = 1;
		}
		
		else{
			
		for (var i = 0; i < document.getElementsByTagName("div").length; i++){
			document.getElementsByTagName("div")[i].style.backgroundImage = "url('img/grau90.png')";
		}
		for (var i = 0; i < document.getElementsByClassName("navigation").length; i++){
			document.getElementsByClassName("navigation")[i].style.backgroundImage = "url('img/grau90.png')";
		}
		for (var i = 0; i < document.getElementsByClassName("navLink").length; i++){
			document.getElementsByClassName("navLink")[i].style.color = "#FFF";
		}
		for (var i = 0; i < document.getElementsByClassName("navLinkSub").length; i++){
			document.getElementsByClassName("navLinkSub")[i].style.backgroundImage = "url('img/grau90.png')";
			document.getElementsByClassName("navLinkSub")[i].style.color = "#FFF";
		}
		for (var i = 0; i < document.getElementsByClassName("divider").length; i++){
			document.getElementsByClassName("divider")[i].style.backgroundImage = "none";
		}
		for (var i = 0; i < document.getElementsByClassName("blogHeading").length; i++){
			document.getElementsByClassName("blogHeading")[i].style.backgroundImage = "none";
		}
		for (var i = 0; i < document.getElementsByTagName("p").length; i++){
			document.getElementsByTagName("p")[i].style.color = "#FFF";
		}
		for (var i = 0; i < document.getElementsByTagName("span").length; i++){
			document.getElementsByTagName("span")[i].style.color = "#CCC";
		}
		
		for (var i = 0; i < document.getElementsByClassName("datumLarge").length; i++){
			document.getElementsByClassName("datumLarge")[i].style.backgroundImage = "none";
		}
		for (var i = 0; i < document.getElementsByClassName("date").length; i++){
			document.getElementsByClassName("date")[i].style.color = "#FFF";
		}
		
		change = 0;
		}
	}
	</script>

 

[Duddle]

AW: Javascript Script vereinfachen/verallgemeinern

Möchtest du:
a) das CSS global ändern, also bspw. "die Klasse .date hat jetzt folgende Eigenschaften", oder
b) ein Farbschema anwenden, so ähnlich wie es jetzt funktioniert?

Im Moment sehe ich das Hauptproblem darin, dass du fest definierte Klassen und Tags änderst. Wenn du per JS die komplette CSS-Datei auswechseln würdest, hättest du das der Erweiterbarkeit und Allgemeinheit sofort gelöst (das ist ja auch der Zweck von CSS).

Aber vielleicht willst du ja bspw. dem Nutzer Kontrolle über die Feinheiten geben, dann bräuchtest du eine Funktion, die ein Element (bzw. eine Liste von Elementen), die gewünschte CSS-Eigenschaft und den neuen Wert annimmt - ähnlich dem, was jQuery mit .css() macht.


Duddle

 

[Coulyo]

AW: Javascript Script vereinfachen/verallgemeinern

Auf die einfachsten Sachen kommt man manchmal nicht...
Ich möchte das CSS global ändern, der Nutzer soll keine Kontrolle über das Aussehen erhalten.
Wie tauscht man denn die CSS Datei per Javascript aus?

 

[Duddle]

AW: Javascript Script vereinfachen/verallgemeinern

Hier ist ein Ansatz mit Cookies (was sicher dein nächster Schritt wäre), hier ist die simpelste Variante.


Duddle

 

[Coulyo]

AW: Javascript Script vereinfachen/verallgemeinern

Danke, das mit den Cookies hab ich wirklich als nächstes geplant
Aber der zweite Link funktioniert leider nicht.

 

[layoutbraut]

AW: Javascript Script vereinfachen/verallgemeinern

Ich nutze für größenspezifische CSS-Änderungen folgenden, einfachen Code:

<script language="JavaScript" type="text/javascript">
    if(screen.width >= 800){
        //Weiterleiten auf Dokument
        document.write('<link href="stylea.css" rel="stylesheet" type="text/css">');
    } else { document.write('<link href="styleb.css" rel="stylesheet" type="text/css">');
        }
</script>

 

[Myhar]

AW: Javascript Script vereinfachen/verallgemeinern

Ich weiß, das hat nichts mit dem ursprünglichen Problem des TE zu tun, aber wieso verwendest du dafür Javascript und keine Mediaqueries? Diese sind nämlich genau dafür da.

 

[Coulyo]

AW: Javascript Script vereinfachen/verallgemeinern

Ok, das funktioniert, wenn ich es ein wenig umschreibe

Aber mal eine Frage, die etwas Offtopic ist:
Ich möchte meine Seite auf Wordpress aufbauen und soweit ich weiß muss die CSS Datei da style.css heißen. Wenn ich jetzt auf eine andere wechsle, die xyz.css heißt, funktioniert das dann noch?

 

[Duddle]

AW: Javascript Script vereinfachen/verallgemeinern

Ja, natürlich. Einer Website ist es egal, woher die Style-Informationen kommen. Die Festlegung auf "style.css" ist wohl nur, damit Wordpress einfach sagen kann "binde style.css im Ordner foobar ein". Wenn du danach zusätzliche / andere .css-Dateien einbindest, bzw. die aktuelle ersetzt, lädt der Browser diese dazu.


Duddle

 

[layoutbraut]

AW: Javascript Script vereinfachen/verallgemeinern

Durch das Manipulieren des Dokuments per JavaScript wird der neue linktag bei Aufruf in die Seite geschrieben, ist also nur temporär in der Datei.

Andernfalls habe ich einen guten Artikel zum Thema gefunden:

http://www.pixelbar.be/blog/how-to-eigene-javascript-und-css-dateien-in-wordpress-sauber-einbinden/