JavaScript是一種高階的程式語言，廣泛應用於Web開發中。 Javascript可以用來改變網頁的樣式，包括修改元素的顏色、字體和樣式等，本文將介紹如何使用Javascript的if語句來實現背景色的切換。
一、準備工作
在使用Javascript之前，首先需要在HTML頁面中引入它。通常在HTML的
標籤中添加<script>標籤，引入Javascript文件，範例程式碼如下：<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 id="Hello-world">Hello, world!</h1> </div> </body> </html></pre><p>此外，我們還需要一個頁面元素來顯示背景色。在本例中，我們選擇body元素作為背景色顯示區域。 HTML程式碼如下：<pre class='brush:php;toolbar:false;'><body> <div id="app"> <h1 id="Hello-world">Hello, world!</h1> </div> </body></pre><p>二、Javascript實作背景色切換<p>在HTML頁面中引入Javascript後，我們就可以使用Javascript來控制頁面元素的樣式了。在本例中，我們可以使用Javascript來修改body元素的背景色。可以使用if語句來實現背景色的切換。 <p>範例程式碼如下：<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><p>程式碼分析：<p>首先，我們使用document.querySelector('body')來取得body元素。該函數傳回一個元素的引用，可以在程式碼中使用body來操作該元素。 <p>然後，我們使用if語句來判斷目前背景色是否為白色。如果目前背景色為白色，則將背景色設為黑色；否則，將背景色設為白色。 <p>三、使用按鈕觸發背景色切換<p>現在，我們已經實作了透過Javascript的if語句來切換背景色。但是，如果使用者想要更方便地切換背景色，我們可以新增一個按鈕來觸發背景色的切換。這可以透過新增包含在HTML中的button元素來實現。 <p>HTML範例程式碼如下：<pre class='brush:php;toolbar:false;'><button onclick="toggleBackground()">Click me!</button></pre><p>我們新增了一個button元素，並使用onclick屬性來指定當按鈕被點擊時要呼叫的函數toggleBackground()。 <p>我們需要新增一個名為toggleBackground()的函數，程式碼如下：<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><p>此函數與先前的範例程式碼相同，它使用了if語句來實現背景色的切換。當按鈕被點擊時，該函數將被調用，背景色將切換為另一種顏色。 <p>四、完整程式碼實作<p>下面是完整的HTML頁面程式碼，可以直接複製到編輯器中使用。 <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>