如何将raw CSS转换为Javascript DOM style属性对应写法

• 借助浏览器原生CSS解析能力处理raw CSS字符串，避免手动写正则匹配的边界问题（比如CSS注释、多选择器、属性值带特殊符号等场景）。可以创建临时style标签，把raw CSS写入后插入document，通过style元素的sheet属性拿到CSSStyleSheet实例，浏览器已经自动把选择器和对应样式规则完成关联，不需要自己做匹配。
• 遍历CSSStyleSheet的cssRules列表，对每条普通样式规则，分别获取selectorText（选择器内容）和style（该选择器对应的所有样式声明集合），可以自行过滤掉@media、@keyframes等不需要的规则类型。
• 遍历当前规则的style对象的所有可枚举属性，取出CSS属性名和对应属性值，把短横线命名的CSS属性转换为驼峰命名即可（比如border-top转borderTop，用简单正则就能实现）。
• 按要求拼接赋值语句，同一个选择器的所有语句放在一组，不同选择器的语句组之间用空行分隔即可。

function cssToDomStyle(rawCSS) {
  // 创建临时style标签用于解析CSS
  const tempStyle = document.createElement('style');
  tempStyle.textContent = rawCSS;
  document.head.appendChild(tempStyle);
  
  const rules = tempStyle.sheet.cssRules;
  const result = [];
  
  for (let rule of rules) {
    // 只处理普通样式规则，跳过其他规则类型
    if (!(rule instanceof CSSStyleRule)) continue;
    
    const selector = rule.selectorText;
    const styleDeclarations = rule.style;
    const currentGroup = [];
    
    for (let i = 0; i < styleDeclarations.length; i++) {
      const cssProp = styleDeclarations[i];
      const propValue = styleDeclarations.getPropertyValue(cssProp).trim();
      // CSS短横线属性转DOM驼峰属性
      const domProp = cssProp.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
      // 拼接输出语句
      currentGroup.push(`document.querySelector("${selector}").style.${domProp} = "${propValue}";`);
    }
    
    if (currentGroup.length) {
      result.push(currentGroup.join('\n'));
    }
  }
  
  // 移除临时DOM元素
  document.head.removeChild(tempStyle);
  // 不同选择器组之间用空行分隔
  return result.join('\n\n');
}

// 测试示例
const raw_css = `
    h1 {
      color: red;
      display: block;
    }
    
    .myClass {
      background: blue;
      position: absolute;
      opacity: .3;
    }
`;

console.log(cssToDomStyle(raw_css));

如果你需要处理属性值包含双引号、多选择器匹配、厂商前缀等特殊场景，可以在上述代码基础上自行扩展对应的处理逻辑即可。

内容的提问来源于stack exchange，提问作者Mik Roe