jQuery 获取纯文本 div 的绿色背景(获取"green"，而不是"rgb(0,128,0)"，而不是"#0f0")

Question

我有一个background-color为green的div。在HTML和JavaScript：

<div id="rectangle" style="background-color:green;width:200px;height:100px"></div>
var div = document.getElementById("rectangle")
console.log(div.style.backgroundColor)

控制台日志green.

我尝试在jQuery中做同样的事情。但是我得到了：

var $div = $('#rectangle').css("backgroundColor"); 
console.log($div) 

控制台日志rgb(0, 128, 0)

有没有办法在jQuery中返回文本green的实际颜色。或者，有没有一种简单的方法可以将rgb(0, 128, 0)转换为green？

我正在尝试获取颜色，而不是设置颜色。

Answer 1

这里有一个小的颜色库 https://github.com/Olical/color 您可以使用它将 rgb 字符串格式的颜色转换为数组，而不是像这样命名：

console.info(color.toName(color.toArray("rgb(0, 128, 0)")))

<script src="https://unpkg.com/olical-color@1.0.1/src/color.js"></script>

Answer 2

当你将jQuery 的css()函数与单个参数一起使用时，它会通过getComputedStyle()函数调用获取当前应用的(即，在应用样式表、内联样式等之后)与传递的参数匹配的 style 属性。

因此，当您调用该函数时，您将获得最初设置的 CSS 值的浏览器内部表示形式。让我们用一个例子来说明这一点，但对 DOM/CSSOM 使用 JavaScript：

window.onload = function () {
var kermit = document.getElementById('kermit');
console.log('style: ', kermit.style.backgroundColor);
console.log('computed: ', window.getComputedStyle(kermit).backgroundColor);
};

<div id="kermit" style="background-color: green; color: #fff">It ain't easy</div>

根据您的浏览器，它应显示为第一个日志条目green，第二个日志条目应显示为rgb(0, 128, 0)。我说"取决于你的浏览器"是因为，正如jQuery的css文档中所解释的那样：

不同的浏览器可能会返回逻辑上但不等于文本的 CSS 颜色值，例如 #FFF、#ffffff 和 rgb(255,255,255)。

获得您想要的东西的最简单方法是...好吧，除了使用xxxmatko指出的库之外...以在通过getComputedStyle检索的颜色值与名称之间创建映射。请注意，这不会告诉您样式表的作者或最初指定颜色名称的任何内容，还是碰巧具有相同 RGB 值的其他值。

window.onload = function () {
var colorMap = {
'rgb(0, 128, 0)': 'green'
};
var kermit = document.getElementById('kermit');
var computed = window.getComputedStyle(kermit).backgroundColor;
console.log('color name: ', colorMap[computed]);
};

<div id="kermit" style="background-color: green; color: #fff">It ain't easy</div>

为其余命名颜色(以及不同的相应颜色格式)创建该地图留给读者作为练习。