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

Question

Рассмотрим следующий код:

/* css */
:root {
  --text-color: #666666;
}

input {
  color: var(--text-color);
}

Как узнать, используя Javascript, каково имя пользовательских свойств CSS (переменных) используемых?

// javascript
console.log(document.querySelector('input').style.color);
// prints "", instead of "var(--text-color) or #666666".

Контекст: Я пишу тесты, чтобы проверить, имеет ли элемент правильный цвет (или переменную CSS), который должен иметь.

Answer 1

Чтобы вывести стили из таблицы стилей, вам нужно использовать getComputedStyle

var input = document.querySelector('input');
 // console.log(input.style.color); this is your original code which I have commented out as it seems to have confused you
 // prints "", instead of "var(--text-color) or #666666".

console.log(rgbToHex(window.getComputedStyle(input).getPropertyValue('color')));  
// this is the new code and prints #666666 as requested

function rgbToHex(color) {
    color = ""+ color;
    if (!color || color.indexOf("rgb") < 0) {
        return;
    }

    if (color.charAt(0) == "#") {
        return color;
    }

    var nums = /(.*?)rgb\((\d+),\s*(\d+),\s*(\d+)\)/i.exec(color),
        r = parseInt(nums[2], 10).toString(16),
        g = parseInt(nums[3], 10).toString(16),
        b = parseInt(nums[4], 10).toString(16);

    return "#"+ (
        (r.length == 1 ? "0"+ r : r) +
        (g.length == 1 ? "0"+ g : g) +
        (b.length == 1 ? "0"+ b : b)
    );
}

:root {
  --text-color: #666666;
}

input {
  color: var(--text-color);
}

<input type="submit" value="test">

Отсюда происходит преобразование rgb в шестнадцатеричные: RGB в шестнадцатеричные и шестнадцатеричные в RGB

Answer 2

Здесь я только что дал пример кода.

Если мы будем использовать приведенный ниже CSS во входном текстовом поле,

.color {
    color: red;
}

<!--- Html code --->

<input type="text" name="name" id="name" class="color">

<!--- JS code --->
var cssName = document.getElementById('name').getAttribute('class');
console.log(cssName);

Надеюсь, это вам.