如何獲取 HTML 元素的背景顏色？

Question

如何使用 JavaScript 獲取任何元素的背景顏色，例如<div> ？ 我試過了：

 <html> <body> <div id="myDivID" style="background-color: red"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <input type="button" value="click me" onclick="getColor();"> </body> <script type="text/javascript"> function getColor() { myDivObj = document.getElementById("myDivID") if (myDivObj) { console.log('myDivObj.bgColor: ' + myDivObj.bgColor); // shows: undefined console.log('myDivObj.backgroundcolor: ' + myDivObj.backgroundcolor); // shows: undefined //alert ( 'myDivObj.background-color: ' + myDivObj.background-color ); // this is not a valid property:) console.log('style:bgColor: ' + getStyle(myDivObj, 'bgColor')); //shows: undefined console.log('style:backgroundcolor: ' + getStyle(myDivObj, 'backgroundcolor')); // shows:undefined: console.log('style:background-color: ' + getStyle(myDivObj, 'background-color')); // shows: undefined } else { console.error('Error: When function "getColor();" was called, no element existed with an ID of "myDivId".'); } } /* copied from `QuirksMode` - http://www.quirksmode.org/dom/getstyles.html - */ function getStyle(x, styleProp) { if (x.currentStyle) var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp); return y; } </script> </html>

Answer 1

獲取號碼：

window.getComputedStyle( *Element* , null).getPropertyValue( *CSS* );

例子：

window.getComputedStyle( document.body ,null).getPropertyValue('background-color');  
window.getComputedStyle( document.body ,null).getPropertyValue('width');  
~ document.body.clientWidth

Answer 2

和所有包含連字符的 css 屬性一樣，它們在 JS 中的對應名稱是去掉連字符，將下面的字母變成大寫： backgroundColor

alert(myDiv.style.backgroundColor);

Answer 3

簡單的解決方案

myDivObj = document.getElementById("myDivID")
let myDivObjBgColor = window.getComputedStyle(myDivObj).backgroundColor;

現在背景顏色存儲在新變量中。

https://jsfiddle.net/7q1dpeo9/1/

Answer 4

使用 jQuery：

jQuery('#myDivID').css("background-color");

帶原型：

$('myDivID').getStyle('backgroundColor');

純JS：

document.getElementById("myDivID").style.backgroundColor

Answer 5

這取決於您需要的 div 樣式。 這是在CSS中定義的背景樣式還是通過javascript(inline)添加到當前節點的背景樣式？

對於CSS樣式，您應該使用計算樣式。 就像你在getStyle()所做的那樣。

對於內聯樣式，您應該使用node.style參考： x.style.backgroundColor ；

另請注意，您通過使用駝峰式大小寫/非連字符引用來選擇樣式，因此不是background-color ，而是backgroundColor ；

Answer 6

這對我有用：

var backgroundColor = window.getComputedStyle ? window.getComputedStyle(myDiv, null).getPropertyValue("background-color") : myDiv.style.backgroundColor;

而且，更好的是：

var getStyle = function(element, property) {
    return window.getComputedStyle ? window.getComputedStyle(element, null).getPropertyValue(property) : element.style[property.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); })];
};
var backgroundColor = getStyle(myDiv, "background-color");

Answer 7

使用JQuery ：

var color = $('#myDivID').css("background-color");

Answer 8

您可以使用 jquery 制作一個偽 class 來檢查元素的背景顏色屬性是否不透明，或 rgba(0, 0, 0, 0)" 並找到最接近的元素，即偽 ZA2F2A2ED4F8EBC2ABC1DZC2 為真。

如何獲取 HTML 元素的背景顏色？

問題描述

7 個解決方案

解決方案1
92 2014-09-23 09:44:03

解決方案2
50 已采納 2009-12-11 10:18:52

解決方案3
20 2019-12-11 03:07:48

解決方案4
19 2009-12-11 11:18:01

解決方案5
12 2009-12-11 10:24:11

解決方案6
9 2018-07-02 13:49:14

解決方案7
3 2009-12-11 10:19:54

解決方案8
-1 2022-08-14 16:13:31

如何獲取 HTML 元素的背景顏色？

問題描述

7 個解決方案

解決方案1 92 2014-09-23 09:44:03

解決方案2 50 已采納 2009-12-11 10:18:52

解決方案3 20 2019-12-11 03:07:48

解決方案4 19 2009-12-11 11:18:01

解決方案5 12 2009-12-11 10:24:11

解決方案6 9 2018-07-02 13:49:14

解決方案7 3 2009-12-11 10:19:54

解決方案8 -1 2022-08-14 16:13:31

解決方案1
92 2014-09-23 09:44:03

解決方案2
50 已采納 2009-12-11 10:18:52

解決方案3
20 2019-12-11 03:07:48

解決方案4
19 2009-12-11 11:18:01

解決方案5
12 2009-12-11 10:24:11

解決方案6
9 2018-07-02 13:49:14

解決方案7
3 2009-12-11 10:19:54

解決方案8
-1 2022-08-14 16:13:31