Question

考虑以下代码：

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

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

我如何使用Javascript知道所使用的CSS custom properties (variables)的名称？

// 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 to Hex and Hex to 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);

希望，你会的。

如何获取正在使用的CSS变量的名称？

2 个答案: