ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScript は if を使用して背景色の切り替えを変更します
JavaScript は if を使用して背景色の切り替えを変更します
- WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
- 2023-05-12 14:16:37959ブラウズ
JavaScript は、Web 開発で広く使用されている高水準プログラミング言語です。 JavaScriptでは要素の色やフォント、スタイルを変更するなどWebページのスタイルを変更することができますが、今回はJavaScriptのif文を使って背景色を切り替える方法を紹介します。
1. 準備
JavaScript を使用する前に、まず HTML ページに Javascript を導入する必要があります。通常、HTML の 93f0f5c25f18dab9d176bd4f6de5d30e タグに 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを追加して Javascript ファイルを導入します。サンプルコードは次のとおりです:
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="app">
<h1>Hello, world!</h1>
</div>
</body>
</html>さらに、表示するページ要素も必要です背景色。この例では、背景色の表示領域として body 要素を選択します。 HTML コードは次のとおりです。
<body>
<div id="app">
<h1>Hello, world!</h1>
</div>
</body>2. Javascript は背景色の切り替えを実装します。
JavaScript を HTML ページに導入した後、JavaScript を使用してページ要素のスタイルを制御できます。この例では、JavaScript を使用して body 要素の背景色を変更できます。 if ステートメントを使用して背景色を切り替えることができます。
サンプル コードは次のとおりです。
var body = document.querySelector('body');
if (body.style.backgroundColor === 'white') {
body.style.backgroundColor = 'black';
} else {
body.style.backgroundColor = 'white';
}コード分析:
まず、document.querySelector('body') を使用して body 要素を取得します。この関数は、コード内の本体を使用して操作できる要素への参照を返します。
次に、if ステートメントを使用して、現在の背景色が白かどうかを判断します。現在の背景色が白の場合は背景色を黒に設定し、そうでない場合は背景色を白に設定します。
3. ボタンを使用して背景色の切り替えをトリガーします
これで、JavaScript の if ステートメントを使用して背景色の切り替えを実装しました。ただし、ユーザーが背景色をより便利に切り替えたい場合は、背景色の切り替えをトリガーするボタンを追加できます。これは、HTML に含まれるボタン要素を追加することで実現できます。
HTML サンプル コードは次のとおりです。
<button onclick="toggleBackground()">Click me!</button>
button 要素を追加し、onclick 属性を使用して、ボタンがクリックされたときに呼び出される関数 toggleBackground() を指定しました。
toggleBackground() という名前の関数を追加する必要があります。コードは次のとおりです。
function toggleBackground() {
var body = document.querySelector('body');
if (body.style.backgroundColor === 'white') {
body.style.backgroundColor = 'black';
} else {
body.style.backgroundColor = 'white';
}
}この関数は前のサンプル コードと同じで、if ステートメントを使用して背景を切り替えます。色。ボタンをクリックするとこの関数が呼び出され、背景色が別の色に切り替わります。
4. 完全なコード実装
以下は完全な HTML ページ コードであり、エディターに直接コピーして使用できます。
<script>
function toggleBackground() {
var body = document.querySelector('body');
if (body.style.backgroundColor === 'white') {
body.style.backgroundColor = 'black';
} else {
body.style.backgroundColor = 'white';
}
}
</script>
<button onclick="toggleBackground()">Click me!</button>
Hello, world!
HTML ファイル全体で、toggleBackground() 関数を含む 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを追加し、6c04bd5ca3fcae76e30b72ad730ca86d タグに背景の切り替えをトリガーする bb9345e55eb71822850ff156dfde57c8 要素を追加しました。色。 。ボタンをクリックすると、toggleBackground() 関数が呼び出され、背景色が別の色に切り替わります。
この記事では、JavaScriptのif文を使って背景色を切り替える方法を紹介します。同時に、HTML ページで bb9345e55eb71822850ff156dfde57c8 要素を使用して背景色の切り替えをトリガーする方法も示します。 Javascript を使用してより複雑なインタラクティブな効果を実現したい場合は、この言語を深く学習して、Web ページをより生き生きとした興味深いものにすることができます。
以上がJavaScript は if を使用して背景色の切り替えを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。