Textfarbe per button ändern

[Leoloewe]

Hallo,
ich würde gerne die Textfarbe einer ul list per Button ändern lassen. Leider fehlt mir hier die passende Funktion.

<button type="button" onclick=?????>Drück mich!</button>

Sollte der Button gedruckt werden soll die Textfarbe sich auf Blau ändern.

 

[Flown]

Das funktioniert mittels JavaScript und das hier ist ein Java Forum.

Aber um dir die Lösung zu verraten: Du suchst aus dem DOM deine Elemente, setzt direkt ein style attribut oder gibst denen eine css klasse mit deiner gewünschten Farbe

 

[Leoloewe]

Das funktioniert mittels JavaScript und das hier ist ein Java Forum.

Aber um dir die Lösung zu verraten: Du suchst aus dem DOM deine Elemente, setzt direkt ein style attribut oder gibst denen eine css klasse mit deiner gewünschten Farbe

Danke für deine Antwort. Der Text besitzt bereits mehrere css klassen. Der Button soll bewirken, dass diese überschrieben werden und alle gemeinsam eine gemeinsame farbe haben.

 

[krgewb]

Schreib doch eine eigene Funktion.

Dazu schreibst du

<button type="button" onclick=meineSupercooleFunktion()>Drück mich!</button>

Und dann:

<script type="text/javascript">	 	
			
    function meineSupercooleFunktion(){
        // TODO
    }

</script>

 

[Leoloewe]

Schreib doch eine eigene Funktion.

Dazu schreibst du

<button type="button" onclick=meineSupercooleFunktion()>Drück mich!</button>

Und dann:

<script type="text/javascript">        
           
    function meineSupercooleFunktion(){
        // TODO
    }

</script>

So weit war ich auch schon, allerdings habe ich keine Ahnung wie die Funktion aussehen könnte

 

[MoxxiManagarm]

<div id="myText" class="red-text">Super cooler Text, der ursprünglich rot ist.</div>
<button type="button" onclick="document.getElementById('myText').style.color = 'blue'">Drück mich für blauen text!</button>

(https://stackblitz.com/edit/js-cekhvc?file=index.html)

 

[krgewb]

Auf diese Weise kannst du den Text mit der ID myText blau machen.

var m = document.getElementById("myText");
m.style.color = "blue";

Wenn du eine class verwendest, must du getElementsByClassName() verwenden. Das ist aber dann ein Array.
Aber du musst es nochmal anders machen, da du ul umfärben willst. Ich weiß gerade nicht, wie man das macht.

Es gibt in css drei Sachen:
- Tags wie z.B. ul. Der Name steht einfach so in der CSS-Datei.
- Klassen. Bei diesen steht ein Punkt vor dem Namen.
- IDs. Bei diesen steht ein Rautezeichen vor dem Namen.