[JavaScript] Element-Hintergrundfarbe ändern anhand von Formular (Colorpicker)

Dieses Thema im Forum "Webentwicklung" wurde erstellt von KaffeeJunkie, 12. August 2010 .

  1. 12. August 2010
    Element-Hintergrundfarbe ändern anhand von Formular (Colorpicker)

    Hallo lieber Raider,
    ich habe ein kleines Problem.

    Ich habe ein Colorpicker-Script von jscolor.com runtergeladen was auch super klappt. Jetzt wollte ich ein kleines Vorschau-DIV machen wo ebenfalls die Hintergrundfarbe geändert wird. Nur leider habe ich nur die funktion gefunden um den Hintergrund von der ganzen Seite zu ändern.

    Hat jemand vielleicht von euch eine Idee wie ich das schaffen könnte?
    Bin leider noch nicht so fit in Javascript.

    HTML:
    <form method="post" form style="display:inline" action="/">
    <input name="Eingabe" class="color" type="text" maxlength="6" id="Eingabe_hintergrund" onchange="setText(this.value, 'hintergrund');document.getElementsByTagName('BODY')[0].style.backgroundColor = '#'+this.color" onkeyup="setText(this.value, 'hintergrund')" value="Hintergrundfarbe" size="5" />
    </form
     
  2. 12. August 2010
    AW: DIV Hintergrundfarbe ändern mit Form!

    Den Hintergrund eines Elementes kannst du wie den Body Hintergrund ändern.


    Ob nun body.style.background='#000';
    oder getElementById('abc').style.background='#000'; ist relativ egal.

    Kannst natärlich noch mit getElementsByName oder wenn du mit einem Framework arbeitest meistens noch getElementsByclass arbeiten.
     
  3. 12. August 2010
    AW: DIV Hintergrundfarbe ändern mit Form!

    Hoi

    Code:
    <input type="text" id="inBGColor" value="#000000" />
    <a onclick="javascript:document.bgColor= document.getElementById('inBGColor').value;">Change</a>
     
  4. 12. August 2010
    AW: DIV Hintergrundfarbe ändern mit Form!

    Verstehe ich jetzt nocht so ganz
     
  5. 13. August 2010
    AW: DIV Hintergrundfarbe ändern mit Form!

    Najo. Du gibst den Elementen ID's die du dann per JS abrufst. Einmal um die Eingabe abzurufen und
    einmal um etwas einzufärben. In dem Beispiel den ich gepostet habe hatte ich den kompletten Hintergrund eingefärbt.
     
  6. 13. August 2010
    AW: DIV Hintergrundfarbe ändern mit Form!

    naja z.B. das div wo der bg gefärbt werden soll:
    HTML:
    <div> blabla </div> 
    daraus machst du:
    HTML:
    <div id="changeBG"> blabla </div> 
    die id sollte eindeutig sein

    wenn du nun einen button hast
    HTML:
    <input type="button" value="change">
    brauchst du nun eine javscript funktion, durch die das div gefärbt wird.

    HTML:
    <input type="button" value="change" onclick="javascript:document.getElementById('changeBG').style.backgroundColor='#000000'">
    könntest es auch ohne button machen, sonder per link --> siehe terraNovas post.

    ist jetzt nur ein beispiel ,wie das prinzip funktionieren sol, ob meins nun 100% funzt, weiß ich nicht.
     
  7. 13. August 2010
    AW: DIV Hintergrundfarbe ändern mit Form!

    Vielen dank hat geklappt, hatte wohl mal wieder einen Brain !
    BW's sind raus!
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.