有没有办法获得任何CSS颜色的十六进制值?

时间:2013-02-04 10:05:50

标签: javascript css css3

真正有问题

编写一个函数,从任何CSS颜色或由类

定义的颜色返回颜色值

初始配方

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

所以我已经定义了一个正则表达式,以确定该字符串是#fff还是rgb(0,0,0),但它没有捕获CSS标准颜色,例如black和{{ 1}}。我应该测试每个颜色名称还是有任何方法或预先存在的功能来做到这一点?感谢。

个人使用的解决方案

  • 如果您想要以点开头的类名,例如“.myClass”
white

用法示例:

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;
    }
  }

基于mplungjan的答案的解决方案

  • 如果您想要普通的班级名称,例如“myClass”

使用此答案搜索是否存在具有此名称的班级:https://stackoverflow.com/questions/983586/...

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

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

用法示例:

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;
    }
  }

1 个答案:

答案 0 :(得分:4)

您可以使用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"));