Mit einem Button klick CSS verändern?
Ich will, das wenn ich auf ein Knopf drücke, sich die Farbe von meinem Text ändert wie geht das?
2 Antworten
Wenn Sie das CSS für den Text im Block und nicht für die Schaltfläche selbst ändern möchten, verwenden Sie Javascript oder jQuery.
Variante 1. Die älteste Methode besteht darin, einen Skriptbefehl direkt zum HTML-Code der Schaltfläche hinzuzufügen. Ein solcher Code ist jedoch unpraktisch zu überprüfen und zu bearbeiten. Es ist nur für die einfachsten Änderungen geeignet.
<button onclick="document.getElementById('myText').style.color = 'red'">Repaint the Text</button>
<div id="myText">The text turns red after pressing the button.</div>
Variante 2. Es ist besser, die Skripte in einer separaten Datei zu speichern oder sie zumindest am Ende eines HTML-Dokuments zu sammeln.
Dann brauchen Sie:
- Weisen Sie der Schaltfläche und dem Textblock die Bezeichner zu.
- Fügen Sie einen Button-Click-Handler hinzu.
- Dieser Handler findet den Block mit dem Text und ändert sein CSS.
<button id="myButton">Repaint the Text</button>
<div id="myText">The text turns red after pressing the button.</div>
<script>
document.getElementById('myButton').onclick = function() {
document.getElementById('myText').style.color = 'red';
}
</script>
Variante 3. Das gleiche, aber mit jQuery:
<button id="myButton">Repaint the Text</button>
<div id="myText">The text turns red after pressing the button.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#myButton').click( function() {
$('#myText').css('color', 'red');
});
});
</script>
Variante 4. Aber am besten werden neue CSS-Stile für Text als zusätzliche Klasse von Stilen beschrieben.
<style>
.colored-text {
color: red;
}
</style>
<button id="myButton">Repaint the Text</button>
<div id="myText">The text turns red after pressing the button.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
$('#myButton').click( function() {
$('#myText').addClass('colored-text');
});
});
</script>
Zusätzliche Links:
https://stackoverflow.com/questions/42134731/css-change-button-style-after-click/42134808
Der Fragesteller hatte das gleiche Problem. Die Lösung kann eine reine reine CSS, natives JS oder über die Bibliothek JQuery sein. Codebeipiele zum Copy. Paste gibt es am angegebenen Link