JavaScript は if を使用して背景色の切り替えを変更します

WBOY

リリース： 2023-05-12 14:16:37

オリジナル

906 人が閲覧しました

JavaScript は、Web 開発で広く使用されている高水準プログラミング言語です。 JavaScriptでは要素の色やフォント、スタイルを変更するなどWebページのスタイルを変更することができますが、今回はJavaScriptのif文を使って背景色を切り替える方法を紹介します。

1. 準備

JavaScript を使用する前に、まず HTML ページに Javascript を導入する必要があります。通常、HTML のタグに <script> タグを追加して Javascript ファイルを導入します。サンプルコードは次のとおりです: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><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></pre><div class="contentsignin">ログイン後にコピー</div></div><p> さらに、表示するページ要素も必要です背景色。この例では、背景色の表示領域として body 要素を選択します。 HTML コードは次のとおりです。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><body> <div id="app"> <h1>Hello, world!</h1> </div> </body></pre><div class="contentsignin">ログイン後にコピー</div></div><p> 2. Javascript は背景色の切り替えを実装します。</p><p>JavaScript を HTML ページに導入した後、JavaScript を使用してページ要素のスタイルを制御できます。この例では、JavaScript を使用して body 要素の背景色を変更できます。 if ステートメントを使用して背景色を切り替えることができます。 </p><p>サンプルコードは次のとおりです。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var body = document.querySelector('body'); if (body.style.backgroundColor === 'white') { body.style.backgroundColor = 'black'; } else { body.style.backgroundColor = 'white'; }</pre><div class="contentsignin">ログイン後にコピー</div></div><p> コード分析: </p><p>まず、document.querySelector('body') を使用して body 要素を取得します。この関数は、コード内の本体を使用して操作できる要素への参照を返します。 </p><p>次に、if ステートメントを使用して、現在の背景色が白かどうかを判断します。現在の背景色が白の場合は背景色を黒に設定し、そうでない場合は背景色を白に設定します。 </p><p>3. ボタンを使用して背景色の切り替えをトリガーします</p><p>これで、JavaScript の if ステートメントを使用して背景色の切り替えを実装しました。ただし、ユーザーが背景色をより便利に切り替えたい場合は、背景色の切り替えをトリガーするボタンを追加できます。これは、HTML に含まれるボタン要素を追加することで実現できます。 </p><p>HTML サンプルコードは次のとおりです。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><button onclick="toggleBackground()">Click me!</button></pre><div class="contentsignin">ログイン後にコピー</div></div><p>button 要素を追加し、onclick 属性を使用して、ボタンがクリックされたときに呼び出される関数 toggleBackground() を指定しました。 </p><p>toggleBackground() という名前の関数を追加する必要があります。コードは次のとおりです。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function toggleBackground() { var body = document.querySelector('body'); if (body.style.backgroundColor === 'white') { body.style.backgroundColor = 'black'; } else { body.style.backgroundColor = 'white'; } }</pre><div class="contentsignin">ログイン後にコピー</div></div><p>この関数は前のサンプルコードと同じで、if ステートメントを使用して背景を切り替えます。色。ボタンをクリックするとこの関数が呼び出され、背景色が別の色に切り替わります。 </p><p>4. 完全なコード実装</p><p>以下は完全な HTML ページコードであり、エディターに直接コピーして使用できます。 </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <!DOCTYPE html> <html> <head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <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!

ログイン後にコピー