首頁 > 文章 > web前端 > JavaScript用if改背景色切換

JavaScript用if改背景色切換

WBOY原創: 2023-05-12 14:16:37861瀏覽

JavaScript是一種高階的程式語言，廣泛應用於Web開發中。 Javascript可以用來改變網頁的樣式，包括修改元素的顏色、字體和樣式等，本文將介紹如何使用Javascript的if語句來實現背景色的切換。

一、準備工作

在使用Javascript之前，首先需要在HTML頁面中引入它。通常在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>

二、Javascript實作背景色切換

在HTML頁面中引入Javascript後，我們就可以使用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元素。該函數傳回一個元素的引用，可以在程式碼中使用body來操作該元素。

然後，我們使用if語句來判斷目前背景色是否為白色。如果目前背景色為白色，則將背景色設為黑色；否則，將背景色設為白色。

三、使用按鈕觸發背景色切換

現在，我們已經實作了透過Javascript的if語句來切換背景色。但是，如果使用者想要更方便地切換背景色，我們可以新增一個按鈕來觸發背景色的切換。這可以透過新增包含在HTML中的button元素來實現。

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語句來實現背景色的切換。當按鈕被點擊時，該函數將被調用，背景色將切換為另一種顏色。

四、完整程式碼實作

下面是完整的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實現更多複雜的互動效果，可以深入學習這門語言，讓您的網頁變得更加生動有趣。

以上是JavaScript用if改背景色切換的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：javascript中修改節點下一篇：javascript中修改節點

看更多