4

真正的问题

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

初始配方

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

所以我定义了一个正则表达式来确定字符串是否类似于#fffor rgb(0,0,0)，但它不捕获 CSS 标准颜色，例如blackand 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')
4

1 回答 1

4

您可以使用 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"));
于 2013-02-04T10:10:37.240 回答