如何通过JS变量选择CSS属性，实现基于JSON的自定义仪表样式配置

嘿，我完全懂你的需求——把样式存在JSON里方便后续扩展自定义仪表，再通过JS动态把这些样式套到对应元素上对吧？这事儿其实很容易实现，核心就是利用JS对象的方括号属性访问来动态操作style对象，下面一步步给你讲明白：

1. 先梳理你的JSON结构 #

你的JSON里meters是一个数组，第一个元素里的jackpot就是目标样式对象，先把它整理成可直接使用的JS对象（实际项目里你可以通过fetch读取JSON文件后解析）：

// 示例样式配置（如果是从外部文件读取，用fetch + JSON.parse即可）
const styleConfig = {
  "meters": [{ 
    "jackpot": { 
      "position": "fixed", 
      "width": "250px",
      "height": "120px",
      "background-color": "#ff6b6b", // 用标准CSS短横线命名也没问题
      "border-radius": "8px"
    } 
  }]
};

2. 核心实现：动态遍历并应用样式 #

我们需要先拿到目标DOM元素，提取对应的样式对象，最后遍历样式的键值对，用方括号语法动态设置style属性：

// 1. 获取要设置样式的DOM元素（这里假设元素id是jackpot-meter）
const jackpotElement = document.getElementById('jackpot-meter');

// 2. 从配置中提取jackpot的样式对象
const jackpotStyles = styleConfig.meters[0].jackpot;

// 3. 工具函数：把CSS短横线命名转换成JS驼峰命名（比如background-color → backgroundColor）
function cssToCamelCase(prop) {
  return prop.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
}

// 4. 遍历样式属性，动态应用到元素上
for (const [cssProp, value] of Object.entries(jackpotStyles)) {
  // 转换属性名格式
  const jsProp = cssToCamelCase(cssProp);
  // 用方括号动态设置style属性
  jackpotElement.style[jsProp] = value;
}

关键细节说明 #

• 为什么用elem.style[jsProp]而非elem.style.jsProp？因为后者是静态访问固定属性名，而方括号允许我们用变量作为属性名，完美契合你动态选择CSS属性的需求。
• 关于属性名转换：如果你的JSON里已经用了JS驼峰命名（比如backgroundColor），那可以直接跳过cssToCamelCase函数，直接赋值就行。

这样一来，后续新增自定义仪表样式时，你只需要在JSON里添加对应的配置对象，复用这段JS逻辑就能快速实现样式应用啦！

内容的提问来源于stack exchange，提问作者damien deloubes