时间戳

首页 > 解决方案 > JavaScript getComputedStyle 不适用于颜色名称？

javascript - JavaScript getComputedStyle 不适用于颜色名称？

问题描述

我只是问我做错了什么，因为我以前做过，我只是不记得是怎么做的，而且我一定丢失了旧代码。

Firefox 有一个名为的未记录颜色值-moz-win-accentcolor，可用于获取 Windows 10 强调色。

如果我直接在样式表中使用该颜色名称（在我的扩展程序中，以匹配系统的主题），它工作正常，但我需要稍微加深或减轻颜色，如果不获取颜色数据本身，我将无法做到这一点.

这就是我所拥有的，我正在使用window.getComputedStyle并getPropertyValue获取颜色数据。我不在乎它是十六进制还是 RGBA，见鬼，我不在乎它是二进制的。我只需要能够 git 颜色来操作颜色数据。

function getComputedAccent() {
    let fakeEl = document.createElement("div");

    fakeEl.style = "background: -moz-win-accentcolor";

    return window.getComputedStyle(fakeEl).getPropertyValue("background");
}

但这只是返回一个空字符串。知道我忘记了什么吗？

（是的，我知道这是一个黑客，我不在乎。）

标签： javascriptcsswindowsdomcolors

解决方案

好吧，我是愚蠢的。代码确实有效，只是稍作改动。

function getComputedAccent() {
    let fakeEl = document.createElement("div");

    fakeEl.style = "background-color: -moz-win-accentcolor";

    return window.getComputedStyle(fakeEl).getPropertyValue("background-color");
}

getComputedAccent()
"rgb(55, 60, 72)"

它以空字符串响应，因为该background属性并不总是只是一种颜色。它可以是图像。改成这样background-color就好了。

编辑添加更多有用的代码。

function getComputedAccent() {
    let fakeEl = document.createElement("div");

    fakeEl.setAttribute("style", "background-color: -moz-win-accentcolor");

    let color = window.getComputedStyle(fakeEl).getPropertyValue("background-color");
    color = color.match(/rgb\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/);
    color.shift();
    color = color.map((value) => parseInt(value, 10));

    return color;
}

推荐阅读