javascript - 有没有办法获取任何 CSS 颜色的十六进制值？

Question

真正的问题

编写一个函数，返回任何 CSS 颜色或类定义的颜色的颜色值

初步制定

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

所以我定义了一个正则表达式来确定字符串是否类似于 #fff 或 rgb(0,0,0)，但它不是捕捉 CSS 标准颜色，例如 black 和 white。我应该测试每个颜色名称还是有什么方法或预先存在的功能可以做到这一点？谢谢。

个人使用的解决方案

• 如果你想要以点开头的类名，例如“.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://stackoverflow.com/questions/983586/...

然后调用相同的函数(稍作修改)

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')

Answer 1

你可以使用 getComputedStyle - 这不适用于 IE8 及以下版本。

请参阅 Javascript function to convert color names to hex codes 的答案为了比我更好的报道(我写完后看到了)

DEMO

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"));