javascript - 将颜色从 CSS 传递到 Javascript

Question

我将主题颜色定义为 CSS 文件中的变量。然后我想在 JavaScript 中使用相同的颜色(它从数据库中获取值并生成图表)。我不想在 JS 中再次指定颜色。我可以从 CSS 加载颜色列表吗？如果可以，如何加载？

CSS 文件:

/* http://www.colorhunt.co/c/43601 */
:root{
    --maincolor: #113f67;
    --secondcolor: #34699a;
    --thirdcolor: #408ab4;
    --fourthcolor: #65c6c4; 
}

Answer 1

将变量应用到正文，然后使用 getComputedStyle 读出样式

var bodyStyles = window.getCompulatedStyle(document.body);

这将返回一个在 body 上定义的所有样式的对象，现在您可以使用 getPropertyValue 来回溯它。

var varName = bodyStyles.getPropertyValue('--var-name');

其中 varName 现在包含您的变量，对所有颜色执行此操作:

var bodyStyles = window.getComputedStyle(document.body);
var colors = ['--maincolor', '--secondcolor', '--thirdcolor', '--fourthcolor'];
var colorValues = [];

for (var i = 0; i < colors.length; i++) {
    colorValues.push({'name': colors[i], 'hex': bodyStyles.getPropertyValue(colors[i])})
}