CSS stílusok nem fogja frissíteni, mielőtt Fájl feldolgozása

szavazat
0

Kitűzött cél - felhasználó kiválasztja a különböző színek különböző színű be- és létrehozza saját témát. Ha a színek választott, a felhasználó rákattint a letöltés gombra és megkapja a generált CSS fájlt a színeket ő / ő döntött.

Issue - Én képes letölteni a CSS fájlt, de kapok az eredeti értékek ellenére megváltoztatja a bemeneteket különböző színekben.

Mit tettem

A CSS fájl, amely letöltendő már létezik, és az összes szín, amelyek megfelelnek a különböző elemek segítségével történik CSS változókat.

Én frissítésével megváltozik élőben a következőt teszi.

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}`)
  });
});

Aztán elvették a stíluslapot a szerver, megragadta a CSS-változók és a helyükbe a tényleges értéküket (hex színes érték).

Ezután kaptam a visszatérési érték (új stíluslap nélkül változók) és állítsd be az adatokat 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');
})

Már van egy letöltés gomb beállítás az én HTML és fogtam azt korábban a szkriptemben annyira, hogy már bárhol elérhető számomra a használata. downloadBtn

Állítottam fel a gombot a tűz, és megragadta az új lapot.

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

Az eredmény

Kapok az eredeti szín értékeit a stíluslap ellenére megváltoztatja a színek a színes bemenetek az oldalon. Tehát a CSS fájl nem frissül az új színek, mielőtt letölti a fájlt.

A kérdést 13/01/2020 21:54
a forrás felhasználó
Más nyelveken...                            


1 válasz

szavazat
0

Lehet használni a PHP-át az értékeket egy új oldalt. Tegyük fel, hogy úgy döntött, a kívánt színt, majd kattintson a gombra, hogy azt mondja: „létrehozása”, hogy úgy, hogy a „Generate oldal”.

Az értékek nem hárítható át közvetlenül a HTML és akkor töltse le a létrehozás oldal helyett.

Ez, ha tudja, PHP persze csak egy javaslat, hogy hogyan lehet megoldani azt.

(Azt a megjegyzést, de nem tud miatt hírnév)

Válaszolt 13/01/2020 22:20
a forrás felhasználó

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