如何使用 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+ 浏览量

开启您的 职业生涯

通过完成课程获得认证

立即开始
广告