How to get the name of a CSS Variable that's being used?

Question

Consider the following code:

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

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

How do I know, using Javascript, which is the name of the CSS custom properties (variables) used?

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

Context: I'm writing tests to check if the element has the proper color (or CSS variable) that it should have.

This must be SASS or SCSS, that doesn't look like regular CSS. — dmikester1, Oct 03 '18 at 12:59
@dmikester1 https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables — Gerard, Oct 03 '18 at 13:01
I doubt you'll ever get anything like `var(--text-color)` when queryng for the color. Those are just placeholders that get evaluated at runtime — Nelson Owalo, Oct 03 '18 at 13:01
@PlatinumIndustries it's a regular CSS and these are called Custom properties — Temani Afif, Oct 03 '18 at 13:03
Your only way is to read the CSS file and do some String parsing — Temani Afif, Oct 03 '18 at 13:04
just wondering... why do you need the name? Usually you already know the name and are just interested in the value — Danield, Oct 03 '18 at 13:05
@Richard does [this](https://stackoverflow.com/a/6338234/8230810) help? — James Whiteley, Oct 03 '18 at 13:08
@JamesWhiteley it does not work well with HEX colors, they will be converted to RGBA format. — richardaum, Oct 03 '18 at 13:11
You need to use [`getcomputedstyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) to get styles from the stylesheet — Pete, Oct 03 '18 at 13:20

Pete · Answer 1 · 2018-10-03T14:03:55.913

In order to get styles out of the stylesheet, you need to use 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">

The rgb to hex converter comes from here: RGB to Hex and Hex to RGB

Yep - that's your original code - you want the line after that uses the new code — Pete, Oct 03 '18 at 13:44

jawahar N · Answer 2 · 2018-10-03T13:09:21.163

-1

Here I just given sample code.

If we use the below CSS in input textbox,

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

Hope, this will you.

edited Oct 03 '18 at 13:09

answered Oct 03 '18 at 13:08

jawahar N

462
2
13

You aren't using CSS variables. – richardaum Oct 03 '18 at 13:09
color is my CSS variable – jawahar N Oct 03 '18 at 13:10
Nope, color is your class name. Also, red is the value of your color *attribute*. Please take a look on https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables. – richardaum Oct 03 '18 at 13:11
Actually, the question is, need to get the textbox used css variable. Right? Here, my css variable is color and using JS i have get the css variables. Is it right? – jawahar N Oct 03 '18 at 13:12
@jawaharN from your point of view... it might be... but `color` is not an actual _CSS variable_ here, that's a fact. – lealceldeiro Oct 03 '18 at 13:18
[color CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/color) vs [CSS variable](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables)... that's what some devs were trying to say – lealceldeiro Oct 03 '18 at 13:20
@lealceldeiro oh i see. Thanks for you info. Sorry thats was mistake. – jawahar N Oct 03 '18 at 14:25

How to get the name of a CSS Variable that's being used?

2 Answers2