farbpalettet

J

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
 
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?
 
Jofre hat gesagt.:
Kann ich ihn in CSS irgenwie ansprechen und dann verschönern?
Zum Vergrößern anklicken....
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
 
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
 
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:
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>
 
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>
 
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.
 
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>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück