資料結構
網路
關係型資料庫管理系統
作業系統
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+ 閱讀量
