JavaScript で背景色を変更する
Ammar Ali
2021年11月20日
このチュートリアルでは、JavaScript の backgroundColor プロパティを使用して背景色を変更する方法について説明します。
JavaScript の backgroundColor プロパティを使用して背景色を変更する
JavaScript の backgroundColor プロパティを使用して背景色を変更できます。このプロパティを使用するには、背景色を変更する要素を取得する必要があります。次に、backgroundColor プロパティを使用して背景色を設定できます。
たとえば、HTML を使用してページを作成し、backgroundColor プロパティを使用して本文の背景色を緑に変更してみましょう。以下のコードを参照してください。
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
document.body.style.backgroundColor = 'green';
</script>
</body>
</html>
クラスの ID または名前を持つ要素を取得することもできます。ID を使用して要素を取得するには、getElementById() 関数を使用できます。そのクラスを使用して要素を取得するには、getElementsByClassName() 関数を使用できます。
たとえば、ID で要素を取得し、backgroundColor プロパティを使用して背景色を変更してみましょう。以下のコードを参照してください。
<!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>
上記のコードは、ID が myID の要素の背景色のみを変更し、全身セクションは変更しません。また、色名を使用して要素を変更する代わりに、さまざまな色のカラーコードを使用して要素の背景色を変更します。
ボタンを使用してテキストの背景色を変更するコードを書いてみましょう。以下のコードを参照してください。
<!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>
このコードでは、ボタンとテキストが表示されます。ボタンを押すと、テキストの背景色が指定された色に応じて変化します。
著者： Ammar Ali
