Ändern Sie die Hintergrundfarbe in JavaScript
In diesem Tutorial wird erläutert, wie Sie die Hintergrundfarbe mit der Eigenschaft backgroundColor in JavaScript ändern.
Ändern Sie die Hintergrundfarbe mit der Eigenschaft backgroundColor in JavaScript
Wir können die Hintergrundfarbe mit der Eigenschaft backgroundColor in JavaScript ändern. Um diese Eigenschaft zu verwenden, müssen Sie das Element abrufen, dessen Hintergrundfarbe Sie ändern möchten, und dann können Sie die Eigenschaft backgroundColor verwenden, um die Hintergrundfarbe festzulegen.
Lassen Sie uns zum Beispiel eine Seite mit HTML erstellen und die Hintergrundfarbe des Textkörpers mit der Eigenschaft backgroundColor in Grün ändern. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
document.body.style.backgroundColor = 'green';
</script>
</body>
</html>
Sie können das Element auch mit der ID oder dem Namen der Klasse abrufen. Um ein Element mit seiner ID zu erhalten, können Sie die Funktion getElementById() verwenden. Um ein Element über seine Klasse zu erhalten, können Sie die Funktion getElementsByClassName() verwenden.
Lassen Sie uns zum Beispiel ein Element anhand seiner ID abrufen und seine Hintergrundfarbe mit der Eigenschaft backgroundColor ändern. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<p id='myID'>
Hello Wold
</p>
<script type="text/javascript">
document.getElementById('myID').style.backgroundColor = 'green';
</script>
</body>
</html>
Der obige Code ändert nur die Hintergrundfarbe des Elements mit der ID myID und nicht den gesamten Body-Bereich. Sie ändern auch die Hintergrundfarbe eines Elements mithilfe des Farbcodes verschiedener Farben, anstatt sie mithilfe des Farbnamens zu ändern.
Lassen Sie uns einen Code schreiben, um die Hintergrundfarbe eines Textes mit einer Schaltfläche zu ändern. Siehe den Code unten.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<button onClick="Mycolor()">Change Color</button>
<div id="myID">Hello World</div>
<script type='text/javascript'>
function Mycolor() {
var element = document.getElementById("myID");
element.style.backgroundColor='#900';
}
</script>
</body>
</html>
In diesem Code sehen Sie eine Schaltfläche und einen Text. Wenn Sie die Taste drücken, ändert sich die Hintergrundfarbe des Textes entsprechend der angegebenen Farbe.
