Как получить значения вычисленной строки цвета CSS? - PullRequest
Новая
       10

Как получить значения вычисленной строки цвета CSS?

0 голосов
/ 11 мая 2018

Мне нужно получить значение цвета (любого формата, шестнадцатеричного, rgb и т. Д.) CSS-имен цветов или строк.Например, "blue", например, я ожидаю возврата "#0000ff" или "rgb(0, 0, 255)".

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

Я попытался использовать вычисляемые стили в CSS со следующим кодом, и в результате получил "rgb(57, 66, 69)".Цвет, который я установил в персонализации, именно такой.

Вот код этой функции: 

const testInput0 = document.getElementById("test-input-0");
const testInput1 = document.getElementById("test-input-1");


function getWindowsAccentColor() {
    let coloredElement = document.createElement("span");
    coloredElement.style.backgroundColor = "-moz-win-accentcolor";
    let colorValue = getComputedStyle(coloredElement).getPropertyValue("background-color");
    coloredElement.remove();

    return colorValue;
}


testInput1.addEventListener("click", () => {
    let colorValue = getWindowsAccentColor();
    testInput0.value = colorValue;
    console.log(colorValue);
});

Когда я использую этот цвет CSS в своей теме Native Dark , значение обновляется со временем с изменениями (видо, есть ошибки в вопросах об этом).Однако при использовании вычисляемых стилей в JS он остается со старым цветом , пока я полностью не перезапущу браузер .Но все меняется правильно.

...