时间戳

首页 > 解决方案 > 将原始 CSS 转换为 Javascript DOM 样式属性

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

问题描述

有人有将“原始”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 并将其转换为多个规则。为了理智，如果元素被一个新行分隔会很好，就像输出示例一样。我试图通过首先获取括号之间的内容{ ... }并通过拆分;... 来分隔行来拆分它们，但我没有任何好主意将元素链接到样式规则。我也在谷歌中搜索过类似的选项，但似乎没有找到。

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

欢迎任何帮助！

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

标签： javascripthtmlcss

解决方案

你可以试试：

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

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

    • 如果是，我们知道它是一个选择器。提取选择器并将其存储在变量中
    • 否则，检查该行是否为空白或是否为右花括号。如果两者都不是，则通过拆分:和修剪结果来提取 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);

推荐阅读