如何使用 JavaScript DOM 獲取元素的背景顏色？

在本教程中，我們將探討如何使用 JavaScript 獲取元素背景顏色。在許多場景下，我們可能需要獲取頁面上某個元素的顏色，我們將看到如何使用 JavaScript 提供的內建方法輕鬆實現這一點。

我們不僅可以檢索顏色，還可以使用相同的函式設定元素的顏色。為此，我們將使用該函式的修改版本。

瀏覽器支援

  • Chrome 瀏覽器 - 版本 1.0 及更高版本。

  • Edge 瀏覽器 - 版本 12 及更高版本。

  • Internet Explorer - 版本 4.0 及更高版本。

  • Firefox 瀏覽器 - 版本 1.0 及更高版本。

  • Safari 瀏覽器 - 版本 1.0 及更高版本。

  • Opera 瀏覽器 - 版本 3.5 及更高版本。

style.backgroundColor 是 style 庫中的一個內建函式，我們可以使用它來為元素設定特定顏色，並檢索元素的顏色。

語法

object.style.backgroundColor = "color|transparent|initial|inherit"

它可以接受以下四種類型的引數：

  • color - 負責背景顏色。

  • transparent - 背景顏色將為透明。

  • initial - 將當前屬性更改並設定為預設屬性。

  • inherit - 它從父元素繼承其屬性並將其設定為自身。

示例 1

讓我們看看如何使用 style 庫中的內建函式 backgroundColor 為元素設定顏色。

<!DOCTYPE html>
<html>
<body>
<button onclick="display()">Click to Set background Color</button>
   <script>
      function display() {
         document.body.style.backgroundColor = "blue";
      }
   </script>
</body>
</html>

在上面的程式碼中，我們建立了一個按鈕，當單擊時，它將呼叫另一個名為 display 的函式，該函式將使用 style 庫中的 backgroundColor 將該背景的顏色設定為藍色。

示例 2

讓我們看另一個示例，在這個示例中，我們只更改 div 或元素的顏色，而不是整個螢幕。

<!DOCTYPE html>
<html>
<body>
   <h1 style="color:black;">TUTORIAL POINT</h1>
   <button onclick="change_color()">Click</button>
   <div id="my-div"
      style= "width: 250px; height: 100px; background-color: cyan;">
      <h1>TutorialPoint</h1>
   </div>
   <script>
      function change_color() {
         document.getElementById("my-div").style.backgroundColor =
         "purple";
      }
   </script>
</body>
</html>

在上面的程式碼中，我們建立了一個具有某些大小的 div，並將當前背景顏色設定為青色，以及一個按鈕，當單擊時，它將呼叫另一個名為 change_color 的函式，顧名思義，該函式將透過使用 style 庫中的 backgroundColor 將該 div 的背景顏色從青色更改為紫色來更改背景顏色。

style.backgroundColor 是 style 庫中的一個內建函式，我們可以使用它來為元素設定特定顏色，並檢索元素的顏色。

示例 3

讓我們看看如何從網頁中存在的元素中檢索顏色。

<!DOCTYPE html>
<html>
<body>
   <h1 style="color:black;">TUTORIAL POINT</h1>
   <button onclick="name_color()">Click</button>
   <div id="my-div"
      style= "width: 250px; height: 100px; background-color: cyan;">
      <h1>TutorialPoint</h1>
   </div>
   <script>
      function name_color() {
         document.write(document.getElementById("my-div").style.backgroundColor)
      }
   </script>
</body>
</html>

在上面的程式碼中，我們建立了一個具有某些大小的 div，並將當前背景顏色設定為青色，以及一個按鈕，當單擊時，它將呼叫另一個名為 name_color 的函式，顧名思義，該函式將使用 style 庫中的 backgroundColor 檢索該 div 的顏色，並使用 document.write 在螢幕上寫入顏色。

結論

在本教程中，我們看到了如何使用 libarty style 中的函式，即 backgroundColor，為網頁中存在的元素設定背景顏色，我們還可以使用 backgroundColor 返回或檢索已為網頁中存在的特定元素設定的背景顏色。結合 style.backgroundColor 和函式，我們還可以更改按下按鈕時元素的顏色。

更新於： 2022-11-07

3K+ 瀏覽量

開啟您的 職業生涯

透過完成課程獲得認證

立即開始
廣告