javascript - 将原始 CSS 转换为 Javascript DOM 样式属性

Question

有人有好的方法可以将“原始”CSS 转换为 DOM 样式属性吗？例如:

输入:

const raw_css = `

    h1 {
      color: red;
      display: block;
    }
    
    .myClass {
      background: blue;
      position: absolute;
      opacity: .3;
    }

`;

应该变成:

输出:

document.querySelector("h1").style.color = "red";
document.querySelector("h1").style.display = "block";

document.querySelector(".myClass").style.background = "blue";
document.querySelector(".myClass").style.position = "absolute";
document.querySelector(".myClass").style.opacity = ".3";

所以在某种程度上，它应该从 const/let/var 中获取原始 CSS 并将其转换为多个规则。为了理智，如果元素被换行分隔，就像输出示例一样，那就太好了。我试图通过首先获取括号 { ... } 之间的内容并通过拆分 ; 来分隔行来拆分它们......但我没有有任何好主意将元素链接到样式规则。我也在 Google 中搜索过类似的选项，但我似乎没有找到。

我希望有人能给我一些提示。我知道我没有提供太多东西，而且 StackOverflow 不是一种代码编写服务，但我真的坚持这一点。

欢迎任何帮助!

(编辑:我知道并非每个样式属性都可以直接转换为 DOM 样式属性。例如:border-top == borderTop。但我可以编写一个简单的条件脚本来替换那些“不可转换”的属性)

Answer 1

你可以试试:

• 用换行符分割字符串 (\n)

• 遍历每一行并检查它是否匹配正则表达式 .+{.

  • 如果是，我们就知道它是一个选择器。提取选择器并将其存储在变量中
  • 否则，检查该行是否为空白或是否为右花括号。如果两者都不是，则通过 : 拆分并 trim 结果来提取 CSS 属性声明的属性和值

const selectorRegex = /.+{/gm;
const raw_css = `

    h1 {
      color: red;
      display: block;
    }
    
    .myClass {
      background: blue;
      position: absolute;
      opacity: .3;
    }

`;

const lines = []
const split = raw_css.split("\n");
var lastSelector;
split.forEach(e => {
  const trimmed = e.trim();
  if (selectorRegex.test(e)) {
    lastSelector = e.replace("{", "").trim()
  } else if (trimmed != "}" && trimmed.length > 0) {
    const propValue = e.split(":");
    const property = propValue[0].trim();
    const value = propValue[1].trim();
    lines.push(`document.querySelector("${lastSelector}").style.${property} = "${value}"`);
  }
})
console.log(lines);