javascript - CSS 样式在获取文件之前不会更新

Question

预期目标 - 用户从各种颜色输入中选择不同的颜色并创建自己的主题。选择颜色后，用户单击下载按钮并获取生成的包含他/她选择的颜色的 CSS 文件。

问题 - 我能够下载 CSS 文件，但尽管将输入更改为不同的颜色，我还是得到了原始值。

我做了什么

正在下载的 CSS 文件已经存在，并且所有对应于不同元素的颜色都是通过 CSS 变量完成的。

我正在通过执行以下操作来实时更新更改。

import { colors } from './colorHelper'

const inputs = [].slice.call(document.querySelectorAll('input[type="color"]'));

const handleThemeUpdate = (colors) => {
  const root = document.querySelector(':root');
  const keys = Object.keys(colors);
  keys.forEach(key => {
    root.style.setProperty(key, colors[key]);
  });
}

inputs.forEach((input) => {
  input.addEventListener('change', (e) => {
    e.preventDefault();
    const cssPropName = `--${e.target.id}`;
    document.styleSheets[2].cssRules[3].style.setProperty(cssPropName, e.target.value);

    handleThemeUpdate({
      [cssPropName]: e.target.value
    });
    console.log(`${cssPropName} is now ${e.target.value}`)
  });
});

然后，我从服务器获取样式表，抓取所有 CSS 变量并将它们替换为它们的实际值(十六进制颜色值)。

之后，我得到了返回值(没有变量的新样式表)并将其设置为数据 URI。

async function updatedStylesheet() {
  const res = await fetch("./prism.css");
  const orig_css = await res.text();
  let updated_css = orig_css;

  const regexp = /(?:var\(--)[a-zA-z\-]*(?:\))/g;
  let cssVars = orig_css.matchAll(regexp);
  cssVars = Array.from(cssVars).flat();

  for (const v of cssVars) {
     updated_css = updated_css.replace(v,   colors[v.slice(6, -1)]);
   };

  return updated_css;
}

const newStylesheet = updatedStylesheet().then(css => {
 downloadBtn.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(css));
 downloadBtn.setAttribute('download', 'prism-theme.css');
})

我已经在我的 HTML 中设置了一个下载按钮，并且我在我的脚本中更早地获取了它，这样我就可以在任何地方使用它。 downloadBtn

我设置了触发按钮并抓取了新工作表。

downloadBtn.addEventListener('click', () => {
  newStylesheet();
});

结果

尽管更改了页面上颜色输入中的颜色，但我得到了样式表的初始颜色值。所以在我下载文件之前，CSS 文件没有更新为新颜色。

Answer 1

您可以使用 PHP 将值传递到新页面。假设您选择了所需的颜色，然后单击显示“生成”的按钮，将您带到“生成页面”。

这些值将直接传递到 HTML 中，而您将从“生成页面”下载。

当然，如果您了解 PHP，这只是关于如何解决它的建议。

(会评论，但不能因为声誉)