• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Javascript um background-color zu ändern

S

slize26

New member
Hallo, ich verzweifele gerade, ich bin auf der Suche nach einem einfachen und simplen Javascript, mit dem ich die background-color bei einem klick auf den div ändern kann.
Das Script soll zuerst schauen, welche Farbe das div gerade hat (weiß oder grau), wenn die Farbe weiß ist soll Sie bei einem Klick Grau werden und wenn Sie Grau ist soll Sie bei einem Klick weiß werden.
Das ganze soll in dieses schon existierende Script eingebaut werden. Bis jetzt öffnet das Script das Manü meiner Website. Der neue Teil soll noch die Button Farbe ändern.


Code: 
function showhide(divid) {
obj = document.getElementById(divid);
obj.style.display = obj.style.display == 'block' ? 'none' : 'block';


if(obj.backgroundColor == "#fff") {
   obj.style.backgroundColor = "#eeeeee";
   }
   else if(obj.backgroundColor == "#eeeeee") {
   obj.style.backgroundColor = "#fff";
   }
}

Könnt Ihr mir bitte helfen?

Mit freundlichen Grüßen
sliZe
 
Warum machst du in der Zuweisung das korrekte obj.style.backgroundColor und in der Abfrage das nicht korrekte obj.backgroundColor?
 
mikdoe schrieb:
Warum machst du in der Zuweisung das korrekte obj.style.backgroundColor und in der Abfrage das nicht korrekte obj.backgroundColor?
Zum Vergrößern anklicken....


Ich habe das jetzt soweit hinbekommen, dass der Button grau wird, das grau geht aber nicht mehr weg.

Wenn du eine andere, bessere Lösung hast nehme ich auch gerne diese, ich kenne mich mit Javascript nämlich nicht so gut aus.

Code: 
var obj = document.getElementById(divid);
	if(obj.style.backgroundColor != "#eeeeee") {
		obj.style.backgroundColor = "#eeeeee";
	}

	else if(obj.style.backgroundColor == "#fff") {
		obj.style.backgroundColor = "#fff";
	}
 
Wie, es lag am Farbcode? Mit den Hex-Werten muss das genauso gehen, wie mit rgb.

Im übrigen macht dein else if nicht allzu viel Sinn, du sagst da, wenn die Farbe = weiß ist, dann nehme weiß....
 
rico2009 schrieb:
Wie, es lag am Farbcode? Mit den Hex-Werten muss das genauso gehen, wie mit rgb.

Im übrigen macht dein else if nicht allzu viel Sinn, du sagst da, wenn die Farbe = weiß ist, dann nehme weiß....
Zum Vergrößern anklicken....

Stimmt, die macht echt keinen Sinn.

Hier ist nochmal der funktionierende code mit RGB Codes

Code: 
var obj = document.getElementById(divid);
	if(obj.style.backgroundColor != "rgb(238, 238, 238)") {
		obj.style.backgroundColor = "rgb(238, 238, 238)";
	}

	else if(obj.style.backgroundColor == "rgb(238, 238, 238)") {
		obj.style.backgroundColor = "#fff";
	}
 
rico und Julian, das glaube ich nicht, sonst müsste dieses Alert eigentlich #ffff anzeigen, oder?
HTML: 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="background-color:#fff;" id="test"> </div>
<script>
alert(document.getElementById('test').style.backgroundColor);
</script>
</body>
</html>
Da gab es eine Besonderheit bei der Farbermittlung von Elementen mittels JS. Ich weiß aber nicht mehr genau, wie das war. Wenn ich die Doku finde ergänze ich noch den Link.
 
mikdoe schrieb:
Da gab es eine Besonderheit bei der Farbermittlung von Elementen mittels JS. Ich weiß aber nicht mehr genau, wie das war. Wenn ich die Doku finde ergänze ich noch den Link.
Zum Vergrößern anklicken....

Ja, stimmt tatsächlich. Soweit ich mich jetzt informiert habe, werden die Farben als RGB ausgegeben. Zuweisen aber kann man sie auch als normalen HEX-Code.
D.h., man müsste nicht durchgängig RGB verwenden, sondern nur in der Abfrage:
Code: 
if(obj.style.backgroundColor == "rgb(0, 0, 0)") {
obj.style.backgroundColor = "#FF0000";
}
 
Nicht generell, Julian. Wenn du mit inline CSS 'red' zuweist bekommst du auch red bei der Abfrage geliefert. Ich weiß nicht mehr, in welchen Fällen es so oder so war. Deswegen hatte ich das auch nicht direkt gestern geschrieben. Hab die Doku aber noch nicht gefunden. Ob das nur bei JS Farbnamen klappt? Oder welche Regel es gibt?
 
Soweit ich das noch im Kopf habe, gibt es dazu keine Regel und die Browser können da zurückgeben, was sie wollen (ich glaube es gibt auch welche, die Hex zurückliefern, wenn man vorher Hex angewiesen hat).

ABER im JS direkt die Stylewerte reinzuschreiben ist prinzipiell keine gute Idee, da es schlecht wartbar ist. Am besten macht man das über CSS-Klassen, die man hinzufügt oder entfernt oder austauscht. Auf diese kann man sehr gut testen und wenn man z.B. die Farbe mal tauschen will, tut man das dort, wo es hingehört: im CSS.

Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css">
div {
	background-color: blue;
	color: white;
}
div span {
	display: none;
}
div.expanded {
	background-color: red;
	color: black;
}
div.expanded span {
	display: initial;
}
</style>
</head>
<body>
<div>
	klick mich
	<span>
		ich bin toller weiterer Text
	</span>
</div>
<script type="text/javascript">
document.getElementsByTagName("div")[0].onclick = function(){
	this.className = this.className? "": "expanded";
};</script>
</body>
</html>

PS: @slize26: dein Objekt wird bei einer Farbe doch immer per display: none; ausgeblendet... für was brauchst du da die Farbänderung?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben