farbpalettet


Jofre

Erfahrenes Mitglied
Guten Morgen,

gibt es die Möglichkeit mit Javascript eine Farbpalette anzuzeigenn bei der man dann eine Farbe anklicken kann und dann die Hexacode erhält?

GzG

joachim
 

Jofre

Erfahrenes Mitglied
Danke , es funktioniert.
Der codepicker generiert so eine Art Button. Funktional, aber hässlich.Kann ich ihn in CSS irgenwie ansprechen und dann verschönern?
 

Technipion

Erfahrenes Mitglied
Kann ich ihn in CSS irgenwie ansprechen und dann verschönern?
Aber natürlich. Hier ist eine Seite zu dem Thema: <input type="color">

Ich habe der Einfachheit halber in der obersten Demo im Tab CSS das hier ergänzt:
CSS:
p,
label {
    font: 1rem 'Fira Sans', sans-serif;
}

input {
    margin: .4rem;
}
/* ^- war schon */

/* Neu von mir: */
input[type=color] {
    border: 2px solid red;
}
Und schon hatten die inputs einen roten Rand :D
 

Jofre

Erfahrenes Mitglied
Gott zum Gruß

Warum wird der h2 nicht eingefärbt?

Code:
<!DOCTYPE html>
<html>
<head>
<script>
function aendereFarbe(c1,c2) {
    var cv1 = document.getElementById(c1).value;
    var cv2 = document.getElementById(c2).value;

    document.querySelectorAll("h2").forEach(function(h2) {
    h2.style.color = cv1;   
  }); 
 
}
</script>
</head>
<body>

<h2>Überschriften</h2>   
<h2>test</h2>

Wähle Farbe Button : <input type="color" name="color1" id="color1"><br /><br />
Wähle Farbe Text   : <input type="color" name="color2" id="color2"><br /><br />
<input type="button" onClick="aendereFarbe('color1','color2')"/>
</body>
</html>
GzG
Joachim
 

basti1012

Erfahrenes Mitglied
Weil da ein Fehler drinne ist. Dein forEach ist falsch.
Dein foreach kannst du hier eigentlich weg lassen. bei 2 Elemente würde ich das gar nicht nutzen , gerade wenn es noch verschiedene sind.

Ich würde den Javascript so machen , ohne jetzt dein Inline onclick zu klillen.
Normalerweise würde ich Eventlistener bevorzugen
HTML:
  <script>
function aendereFarbe(c1,c2) {

    var cv1 = document.getElementById(c1).value;
    var cv2 = document.getElementById(c2).value;

    document.getElementsByTagName("h2")[0].style.color = cv2;
    document.getElementsByTagName("input")[2].style.color = cv1;
  };

</script>
Mit Eventlistener würde ich das dann so machen
HTML:
<h2>Überschriften</h2>  
<h2>test</h2>

Wähle Farbe Button : <input type="color" name="color1" id="color1"><br /><br />
Wähle Farbe Text   : <input type="color" name="color2" id="color2"><br /><br />
<input type="button" id="einfarben" value="texte einfärben"/>
<script>
but=document.getElementById('einfarben');
but.addEventListener('click',function(){
    but.style.color=document.getElementById('color1').value;
    col=document.getElementById('color2').value;
    document.getElementsByTagName("h2")[0].style.color=col;
});
</script>
Vieleocht sehen die anderen das ja anders
 
Zuletzt bearbeitet:

Jofre

Erfahrenes Mitglied
Funktioniert bei mir nicht


<!DOCTYPE html>
<html>
<head>
<script>
but=document.getElementById('einfarben');
but.addEventListener('click',function(){
but.style.color=document.getElementById('color1').value;
col=document.getElementById('color2').value;
document.getElementsByTagName("h2")[0].style.color=col;
});
</script>
</head>
<body>
<h2>Überschriften</h2>
<h2>test</h2>

Wähle Farbe Button : <input type="color" name="color1" id="color1"><br /><br />
Wähle Farbe Text : <input type="color" name="color2" id="color2"><br /><br />
<input type="button" id="einfarben" value="texte einfärben"/>
</body>
</html>
 

Jofre

Erfahrenes Mitglied
Code:
<!DOCTYPE html>
<html>
<head>
<script>

but=document.getElementById('einfarben');
but.addEventListener('click',function(){
    but.style.color=document.getElementById('color1').value;
    col=document.getElementById('color2').value;
    document.getElementsByTagName("h2")[0].style.color=col;
});
</script>
</head>
<body>

    <h2>Überschriften</h2> 
    <h2>test</h2>
    
    Wähle Farbe Button : <input type="color" name="color1" id="color1"><br /><br />
    Wähle Farbe Text   : <input type="color" name="color2" id="color2"><br /><br />
    <input type="button" id="einfarben" value="texte einfärben"/>
</body>
</html>
 

Sempervivum

Erfahrenes Mitglied
Du musst das Javascript hinter das HTML stellen, weil sonst die Elemente, in diesem Fall der Button, noch nicht vorhanden sind, wenn es ausgeführt wird.
 

Jofre

Erfahrenes Mitglied
Enschuldigung Basti, Danke Sempervivum

Aber es ist nicht das was ich gerne möchte.
1. Wenn ich "Wähle Farbe Überschriften oder Text", dann soll sich nicht nur die Buttonfarbe ändern sondern auch SOFORT die Farbe für die Überschriften oder die Texte.
Ich glaube, das geht irgendwie mit addEventListener und change ???
Irgendwie bekomme ich das mit dem <input... nicht konsolidiert.

2.Ich möchte die Farbe für die buttons voreinstellen können. Jetzt kommen sie in schwarz .

3. die Labels sollen auch doe Farbe der Überschriften / Texte bekommen

Enschuldigt, dass ich soviel frage, aber HTML ist nicht meine Stärke und ich weiss nicht wie man den Input type color handelt.




Code:
<!DOCTYPE html>
<html>
<head></head>
<body>   
        <h2>Überschriften</h2>   
        <h2>test</h2>
        <p>Beispiel:  Vorschau </p> 
        <p>Das ist der Rest Text</p>
        
        Wähle Farbe Überschriften : <input type="color" name="color1" id="color1"><br /><br />
        Wähle Farbe Text   : <input type="color" name="color2" id="color2"><br /><br />
        <input type="button" onClick="aendereFarbe('color1','color2')"/>   

<script>
function aendereFarbe(c1,c2) {
    var cv1 = document.getElementById(c1).value;
    var cv2 = document.getElementById(c2).value;
    
    document.querySelectorAll("h2").forEach(function(h2) {
    h2.style.color = cv1;
    });

    document.querySelectorAll("p").forEach(function(p) {
    p.style.color = cv2;
    });


}
</script>

</body>
</html>
 

Sempervivum

Erfahrenes Mitglied
dann soll sich nicht nur die Buttonfarbe ändern sondern auch SOFORT die Farbe für die Überschriften oder die Texte. Ich glaube, das geht irgendwie mit addEventListener und change ???
Ganz genau. Ich zeige dir mal, wie es für die Überschriften geht, dann kannst Du es für die Texte leicht ergänzen
Code:
<!DOCTYPE html>
<html>

<head></head>

<body>
    <h2>Überschriften</h2>
    <h2>test</h2>
    <p>Beispiel: Vorschau </p>
    <p>Das ist der Rest Text</p>

    Wähle Farbe Überschriften : <input type="color" name="color1" id="color1" value="#ff0000"><br /><br />
    Wähle Farbe Text : <input type="color" name="color2" id="color2"><br /><br />

    <script>
        document.getElementById('color1').addEventListener('change', function () {
            var col = this.value;
            document.querySelectorAll("h2").forEach(function (h2) {
                h2.style.color = col;
            });
        });
    </script>

</body>

</html>
2.Ich möchte die Farbe für die buttons voreinstellen können. Jetzt kommen sie in schwarz .
Das geht sehr einfach, indem Du einfach das value-Attribut setzt, siehe das HTML oben.

3. die Labels sollen auch doe Farbe der Überschriften / Texte bekommen
Dazu musst Du sie in einem Container einbetten, und zwar das Label-Tag. Dann kannst die Farbe in dem selben Eventlistener ebenfalls ändern.
 

Jofre

Erfahrenes Mitglied
1 und 2 erledigt.

komme nicht weiter mit Label color Anfangsfarbe und Farbänedrung klar. Habe es in ein div eingestellt, Farbe ändert sich nicht.
Anfangsfarbe identisch
Code:
<!DOCTYPE html>
<html>
<head></head>
<body>
    <h2>Überschriften</h2>
    <h2>test</h2>
    <p>Beispiel: Vorschau </p>
    <p>Das ist der Rest Text</p>
    <div>
            <label for="color1">           
             Hier waehle Farbe Überschriften
            </label>
    </div>
    

    <input type="color" name="color1" id="color1" value="#ff0000"><br /><br />
    Wähle Farbe Text : <input type="color" name="color2" id="color2" value="#ff0000"><br /><br />

    <script>
        
        document.getElementById('color1').addEventListener('change', function () {
            var col = this.value;
            document.querySelectorAll("h2").forEach(function (h2) {
            h2.style.color = col;

            document.getElementsByTagName("div").style.color = col;   
            });
        });

        document.getElementById('color2').addEventListener('change', function () {
            var col = this.value;
            document.querySelectorAll("p").forEach(function (p) {
            p.style.color = col;
            });
        });

    </script>

</body>
</html>
?



.
 

Sempervivum

Erfahrenes Mitglied
Das div brauchst Du gar nicht. So funktioniert es:
Code:
<!DOCTYPE html>
<html>

<head></head>

<body>
    <h2>Überschriften</h2>
    <h2>test</h2>
    <p>Beispiel: Vorschau </p>
    <p>Das ist der Rest Text</p>
    <label for="color1">
        Hier waehle Farbe Überschriften
    </label>
    <input type="color" name="color1" id="color1" value="#ff0000"><br /><br />
    Wähle Farbe Text : <input type="color" name="color2" id="color2"><br /><br />

    <script>
        document.getElementById('color1').addEventListener('change', function () {
            var col = this.value;
            document.querySelectorAll("h2").forEach(function (h2) {
                h2.style.color = col;
            });
            document.querySelector("label[for='color1']").style.color = col;
        });
    </script>

</body>

</html>
 

Sempervivum

Erfahrenes Mitglied
Dein Code für das div sieht so aus:
document.getElementsByTagName("div").style.color = col;
getElementsByTagName liefert eine Nodelist zurück, aus der Du mit einem Index das richtige Element auswählen müsstest:
document.getElementsByTagName("div")[0].style.color = col;
Da es i. allg. mehrere divs auf der Seite gibt, ist das nicht so wirklich praktikabel. Mit querySelector (ohne All) bekommst Du jedoch genau ein Element und brauchst weder einen Index noch eine Schleife.
 

Neue Beiträge