我想编写一个javascript程序来获取css中定义的颜色词的rgb颜色。
例如，如果我输入red，我想输出rgb(255, 0, 0)。我也想从 转换rgb(255, 0, 0)为red。
有没有办法在javascript中做到这一点？
问问题
3472 次
3 回答
4
这不能以编程方式轻松完成，因为浏览器的行为不同。您不能确定它们是返回原始值（例如您的单词）还是计算出的十六进制或 rgb 值。（这是可能的，虽然有getComputedStyle()！）
在每种情况下，您都不会得到 rgb/hex/hsl 值的颜色字。（至少我不知道这是可能的）。
“最简单”、最可靠的方法是创建一个包含所有颜色词及其各自值的映射对象。您可以在此处找到列表：
http://dev.w3.org/csswg/css-color/#svg-color
var word2value = {
red: {"hex":"#FF0000","rgb":"255,0,0"},
/* ... all other values */
}
var value2word = {
"FF0000" : "red",
"255,0,0": "red"
}
请注意，您需要通过括号表示法访问：value2word["255,0,0"]
于 2013-05-29T08:15:05.773 回答
2
你可以
- 使用 javascript 创建一个新元素。
- 将其背景色操作系统样式设置为输入值
- 将其附加到正文
- 得到它的注意：兼容性
window.getComputedStyle - 返回等效的
backgroundColor操作系统
function getRGB(v) {
var el = document.createElement("div");
el.style["background-color"] = v;
document.body.appendChild(el);
var style = window.getComputedStyle(el);
var color = style["backgroundColor"];
document.body.removeChild(el);
return color;
}
getRGB ("red") //"rgb(255, 0, 0)"
但请注意：正如 Cristoph 所说，您不能肯定地说总能获得正确的价值
，尽管它在 Chrome 上对我来说效果很好
但我不认为你可以在没有地图的情况下得到它，就像克里斯托夫建议的那样
JSBin上的恶魔
更新
这是一个带有完整映射的函数，它返回包含颜色的十六进制、命名和 rgb 表示的颜色对象。
function getColor (r,g,b) {
var colors = {TooBigToPostHere:...} //see the JSBin
function rgbToHex(r, g, b) {
var hex = "#";
for (var i = 0; i < 3; i++) {
var _hex = arguments[i].toString(16);
while (_hex.length < 2) _hex = "0" + _hex;
hex += _hex
}
return hex.toUpperCase();
}
if (typeof r === "string") r = r["to"+(!!~r.indexOf("#")?"Upper":"Lower")+"Case"]();
if (r in colors) return colors[r]
else if (r !== undefined && g !== undefined && b !== undefined) {
var hex = rgbToHex(r, g, b);
if (hex in colors) return colors[hex]
else return {
rgb: [r, g, b],
hex: hex,
name: null
}
} else {
throw new SyntaxError("Invalid Arguments");
}
}
产生这个输出：
console.log ( getColor (245,245,245)) //{"hex": "#F5F5F5", "name": "whitesmoke", "rgb": [245, 245, 245]}
console.log ( getColor ("#EE82EE")); //{"hex": "#EE82EE", "name": "violet", "rgb": [238, 130, 238]}
console.log ( getColor ("red")); //{"hex": "#FF0000", "name": "red", "rgb": [255, 0, 0]}
还有一个关于JSBin的Demo
注意：colors 包含扩展颜色关键字的完整列表
这是我用来抓取上述颜色表的代码
var colors = {};
[].forEach.call(document.querySelectorAll (".colortable tr"), function (e,i) {
if ( i > 0 ) {
var hex = e.children[3].innerText;
colors[hex] = {};
colors[hex].hex = hex;
colors[hex].name = e.children[2].innerText;
colors[hex].rgb = e.children[4].innerText.split(",");
colors[hex].rgb.map(function (a,b,c) {c[b] = +a})
colors[colors[hex].name] = colors[hex];
}
});
于 2013-05-29T08:28:14.287 回答
2
我认为这就是你想要的：
Text:
<input type="text" id="ctext" />
<br>RGB:
<input type="text" id="crgb" />
<br>
<button onclick="doMagic();">Magic</button>
<div id="output" style="display:none"></div>
<script>
function doMagic() {
$('#output').html('<p id=test style=\'color:' + $('#ctext').val() + ';\'>sometext</p>');
$('#crgb').val($('#test').css("color"));
}
</script>
在fiddle上检查一下。
我觉得效果很好！
于 2013-05-29T08:33:24.180 回答