стили CSS не будут обновляться до загрузки файла

голоса
0

Намеченная цель - разный пользователь выбирает цвета из различных цветовых входов и создает свою собственную тему. После того , как цвета выбраны, пользователь нажимает на кнопку загрузки и получает сгенерированный файл 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 не обновляется с новыми цветами, прежде чем загрузить файл.

Задан 13/01/2020 в 21:54
источник пользователем
На других языках...                            


1 ответов

голоса
0

Вы можете использовать PHP для передачи значений на новую страницу. Допустим, вы выбрали цвета, которые вы хотите, а затем нажмите кнопку с надписью «Создать», которая приведет вас к «Создать страницу».

Значения будут переданы непосредственно в HTML, и вы бы скачать с Сформировать страницу.

Это если вы знаете PHP, конечно, только предположение о том, как вы могли бы решить эту проблему.

(Будет комментировать, но не может из-за репутацию)

Ответил 13/01/2020 в 22:20
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more