JavaScript getComputedStyle не работает для имени цвета? - PullRequest
Новая
       28

JavaScript getComputedStyle не работает для имени цвета?

0 голосов
/ 01 сентября 2018

Я спрашиваю только, что я делаю не так, потому что я уже сделал раньше, я просто не могу вспомнить, как и я потерял старый код.

Firefox имеет недокументированное значение цвета, называемое -moz-win-accentcolor, которое можно использовать для получения цвета Windows 10 Accent.

Это прекрасно работает, если я использую это имя цвета непосредственно в таблице стилей (в моем расширении, чтобы соответствовать теме системы), но мне нужно немного затемнить или осветлить цвет, и я не могу сделать это без получения сами данные о цвете.

Это то, что у меня есть, я использую window.getComputedStyle и getPropertyValue для получения данных о цвете. Мне все равно, если это шестнадцатеричный или RGBA, черт возьми, мне все равно, если это бинарный. Мне просто нужно иметь возможность использовать цвет для манипулирования данными о цвете. 

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

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

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

Но это просто возвращает пустую строку. Есть идеи, что я забыл?

(Да, я знаю, что это взлом, и мне все равно.)

1 Ответ

0 голосов
/ 01 сентября 2018

Ну, я был тупым. Код работает, с небольшим изменением. 

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