如何使用 JavaScript DOM 返回元素的背景颜色?
在本教程中，我们将探索使用 JavaScript 获取元素背景颜色的方法。在很多情况下，我们可能想要获取页面上元素的颜色，我们将了解如何使用 JavaScript 提供的内置方法轻松实现这一点。
我们不仅可以检索颜色的颜色，还可以使用相同的函数设置元素的颜色。为了实现这一点，我们将使用相同函数的修改版。
浏览器支持
Chrome 浏览器 - 1.0 版及以上版本。
Edge 浏览器 - 12 版及以上版本。
Internet Explorer - 4.0 版及以上版本。
Firefox 浏览器 - 1.0 版及以上版本。
Safari 浏览器 - 1.0 版及以上版本。
Opera 浏览器 - 3.5 版及以上版本。
Style.backgroundColor 是样式库中的内置函数，我们可以使用它来为元素设置特定颜色并检索元素的颜色。
语法
object.style.backgroundColor = "color|transparent|initial|inherit"
它可以采用以下四种类型的参数，即 -
color - 负责背景颜色。
transparent - 背景颜色将是透明的。
initial - 更改并将当前属性设置为默认属性。
inherit - 它从其父元素继承其属性并将其设置为它。
示例 1
让我们看看如何使用内置的样式库中的函数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 的函数，该函数将使用样式库中的 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的函数，顾名思义，该函数将使用样式库中的backgroundColor更改背景颜色，将该 div 背景的颜色从青色设置为紫色。
Style.backgroundColor 是样式库中的一个内置函数，我们可以使用它为元素设置特定颜色并检索元素的颜色。
示例 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 的函数，顾名思义，该函数将使用样式库中的 backgroundColor 告诉我们背景颜色，以检索该 div 的颜色，并使用 document.write 在屏幕上写入颜色。
结论
在本教程中，我们了解了如何使用 libarty 样式中的函数 backgroundColor 为网页中存在的元素设置背景颜色，我们还可以使用 backgroundColor 返回或检索已为网页中存在的特定元素设置的背景颜色。将 style.backgroundColor 与函数结合使用，我们还可以在按下按钮时更改元素的颜色。
