数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究如何使用 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 和函数，我们还可以更改按下按钮时元素的颜色。
3K+ 阅读量
