[Javascript] Ändern nur eines Farbwertes in RGB

[Mini-Leopard]

Hallo ihr lieben!

Ich möchte gerne mit drei Slidern die Hintergrundfarbe einer Box ändern.
Prinzipiell ist das kein Problem, bekomme ich alles hin.

Allerdings möchte ich jetzt mit einem Slider nur Rot, mit dem nächsten Grün und dem wiederanderen Blau ändern.
Also die 3 Kanäle getrennt bearbeiten.
Also nicht so:

document.getElementById('id').style.backgroundColor = "rgb(255,0,150)";

Sonder (sinnbildlich) so:

document.getElementById('id').style.backgroundColor = "r(255)";
document.getElementById('id').style.backgroundColor = "g(0)";
document.getElementById('id').style.backgroundColor = "b(150)";

Ist das irgendwie möglich?
Hat jemand dazu eine Idee?


Lieben Gruß
…

 

[wdominik]

Naja, wenn die Hintergrundfarbe ausschließlich durch die Slider verändert wird könntest Du einfach den Wert von jeweils R, G, B in Variablen festlegen.

var backgroundR = 0;
var backgroundG = 0;
var backgroundB = 0;

Veränderst Du einen der Slider änderst Du die entsprechende Variable:

backroundR = wertVomSlider;

Jetzt weißt Du die Variablen dem DOM-Objekt zu.

document.getElementById('id').style.backgroundColor = "rgb(" + backgroundR + "," + backgroundG + "," + backgroundB + ")";

Das heißt wenn Du jetzt den roten Slider änderst, wird Nur der Rotanteil geändert, die anderen Einstellungen hat Dein Skript sich mit Hilfe der Variablen gemerkt und weißt diese wieder zu.

Man sollte die Variablen allerdings nicht global definieren, sondern innerhalb einer Funktion. Es funktioniert zwar beides, aber es ist kein guter JavaScript Stil.

Alternativ (und insbesondere wenn der Wert der Hintergrundfarbe von Außerhalb modifiziert werden kann) kannst Du auch einfach die alten Werte aus backgroundColor auslesen.

var theElement = document.getElementById('id');

// Geht nur für modernere Browser, IE und so braucht Workaround
var backgroundColor = document.defaultView.getComputedStyle(theElement, "").getPropertyValue("background-color");

var rgbValue = backgroundColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

var backgroundR = rgbValue[1];
var backgroundG = rgbValue[2];
var backgroundB = rgbValue[3];

// Jetzt hast Du die alten Werte vom Element id ausgelesen und kannst nach belieben einen davon ändern und dann wie im obigen Beispiel alle wieder zusammenfügen

document.getElementById('id').style.backgroundColor = "rgb(" + backgroundR + "," + backgroundG + "," + backgroundB + ")";

fertig

 

[Mini-Leopard]

Ich Trottel hab die einfachste Lösung nicht gesehen.
Also der sprichwörtliche Wald mit den lauter Bäumen

Meine Lösung, die ich inzwischen schon umgesetzt habe ist zu einfach.
Ich hab jetzt einfach beim ändern eines Sliders die Werte aller drei Slider abgefragt…
Diese super einfache Idee kam mir nicht in den Sinn. Echt sehr komisch.

Also ich bin ja inzwischen so radikal, dass ich den IE einfach außer Acht lasse )
Aber da es sich hierbei um ein Widget handelt, ist das eh Wurst.

Hier einfach mal meine Lösung:

function setColor()
{
    r = document.getElementById('rSlide').value;
    g = document.getElementById('gSlide').value;
    b = document.getElementById('bSlide').value;
    document.getElementById('box').style.backgroundColor = ("rgb(" + r + "," + g + "," + b + ")");
}

Alle Slider bekommen dann noch diese Funktion als onchange event.
Fertig


Aber danke für Deine Bemühungen!
Liebe Grüße
…

 

[wdominik]

Ja stimmt, so geht es natürlich auch. Ist wohl die einfachste Art das umzusetzen. ^^ Und nichts zu danken.

Wenn du die Variablen außerhalb der Funktion nicht brauchst würde ich sie allerdings innerhalb dieser deklarieren (var ...), nur wegen der Sauberkeit.

 

[Mini-Leopard]

Najah… Auf dem Schlauch steht der Mensch )

Hab ich auch schon überlegt.
Allerdings nutze ich lieber globale Variablen, da mir dann der Weg immer noch offen steht, diese später woanders aufzurufen.
Denn ich hab immer nicht so den riesen Spaß dabei, den gesamten Quellcode zu zerlegen, wenn ich ein weiteres feature einbaue.
Da habe ich mir schon so manches Mal die Karten gelegt, bis ich eine weitere Deklaration der Variable woanders noch gefunden hab

Grüße
…