有没有一种方法可以获取任何CSS颜色的十六进制值？

Question

真正的问题

编写一个函数，该函数可以从任何CSS颜色或通过类定义的颜色返回颜色值。

初始表述

我想知道传递给我的函数的参数字符串是否是颜色-仅回答这一点就已经很好了-然后知道它的十六进制值。

因此，我定义了一个正则表达式来查找字符串是否类似于＃fff或rgb（0,0,0），但它无法捕获诸如black和white之类的CSS标准颜色。我应该测试每个颜色名称，还是有任何方法或预先存在的功能可以做到这一点？谢谢。

个人使用的解决方案

• 如果您想要带点的类名，例如“.myClass”

function getColor(classOrColor) {
    if(classOrColor[0] === '.') {
      var temp = $('<div id="temp" style="display:none;" class="'+ classOrColor.split('.').join(' ') + '"/>').appendTo('body');
      var color = temp.css('color');
      temp.remove();
      return color;
    } else {
      return classOrColor;
    }
  }

使用示例：

getColor('yellow')
getColor('#abc')
getColor('rgb(1,2,3)')
getColor('.myClass .myOtherClass')

mplungjan答案的解决方案

• 如果您想要像"myClass"这样的普通类名

使用此答案搜索是否存在具有此名称的类：https://dev59.com/QHNA5IYBdhLWcg3wYMx-

然后调用相同的函数（稍作修改）

function getColor(classOrColor) {
    if(classExists(classOrColor)) {
      var temp = $('<div id="temp" style="display:none;" class="'+ classOrColor + '"/>').appendTo('body');
      var color = temp.css('color');
      temp.remove();
      return color;
    } else {
      return classOrColor;
    }
  }

使用示例：

getColor('#abc')
getColor('myClass')

- floribon

---

似乎没有现成的函数可以将颜色名称转换为十六进制代码。请参考https://dev59.com/23I_5IYBdhLWcg3wAd82。 - Matt Zeunert

我不确定你需要这些值的确切目的，因此可能不适用，但是SASS有大量颜色函数可以使用，可以完全替代你试图使用JavaScript实现的功能。你可以输入十六进制值并返回rgba或hsla，可以按百分比变暗或变亮颜色，保存变量等。在SASS中：rgba（＃fff，.1）返回-> rgba（255,255,255，.1） - DMTintner

http://stackoverflow.com/questions/5429264/is-it-possible-to-determine-the-hex-value-of-a-named-color - Salman A

@Matt的评论似乎更全面地涵盖了我的建议。 - mplungjan

Answer 1

您可以使用getComputedStyle - 但它在IE8及以下版本中无效。

请参考JavaScript函数将颜色名称转换为十六进制代码的答案，该答案比我写的更全面（在我写完后看到的）。 演示

function getRGB(str){
    var elem = document.createElement("div");
    elem.style.display="none";
    elem.style.color=str;
    document.body.appendChild(elem);
    return  window.getComputedStyle(elem,null).getPropertyValue("color");
  }
alert(getRGB("red"));

- mplungjan

---

我认为在IE中只会显示“红色”。 - mplungjan

我已经想到了类似的方法（使用jQuery），但问题在于，如果字符串是错误的，比如inexistant-color，它会返回父元素的颜色。如果你能告诉我如何知道这种颜色是否存在，我就会接受你的答案。所有这一切的目的是为了让我能够向函数发送一个类名，而不是一个颜色。 - floribon

不可以没有查找表。但是你能详细说明一下“我想能够将类名发送到我的函数而不是颜色”吗？ - mplungjan

我的意思是，目前我可以将“danger-class”传递给此函数，以便如果我成功检测到它不是CSS颜色值（这就是问题所在），我会实例化一些具有此类名称的div并返回其颜色（以与getComputedStyle类似的方式）。我希望你能理解我，我的英语很弱。 - floribon

嗯，这意味着您期望存在一个名为该名称的类。因此，如果您有<style>.danger-class { color:red}</style>，如果存在这样的类，则希望返回红色。您可以使用https://dev59.com/QHNA5IYBdhLWcg3wYMx-首先查找是否存在具有该名称的类，然后在那里获取其颜色。这将有效，除非您有`.red{color:blue}`或其他愚蠢的东西。 - mplungjan

这正是我正在寻找的。在与我的+1稍作交谈后，我决定仅在类名前面加上点号（如“.danger-class”）时处理它们，但还是谢谢！ - floribon