JavaScript getComputedStyle不适用于颜色名称?

问题描述 投票:0回答:1

我只是问我做错了什么,因为我以前做过这件事,我只是记不清楚我是如何丢失旧代码的。

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

如果我直接在样式表中使用该颜色名称(在我的扩展名中,以匹配系统的主题),它可以正常工作但我需要稍微变暗或变亮颜色,如果不获取颜色数据本身我就不能这样做。

这就是我所拥有的,我正在使用window.getComputedStylegetPropertyValue来获取颜色数据。我不在乎它是十六进制还是RGBA,地狱,我不在乎它是否是二进制。我只需要能够git颜色来操纵颜色数据。

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

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

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

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

(是的,我知道这是一个黑客,我不在乎。)

javascript css windows dom colors
1个回答
0
投票

好吧,我是愚蠢的。代码确实有效,只需稍作修改即可。

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;
}
© www.soinside.com 2019 - 2024. All rights reserved.