CSS-Stile werden nicht vor dem Abruf-Datei aktualisieren

stimmen
0

Beabsichtigte Ziel - Benutzer wählen verschiedene Farben aus verschiedenen Farbeingaben und erzeugt ihr eigenes Thema. Sobald die Farben gewählt werden, klickt der Benutzer den Download - Button und erhält die erzeugte CSS - Datei mit den Farben , die er / sie gewählt haben.

Problem - ich bin in der Lage , die CSS - Datei herunterzuladen, aber ich bin die ursprünglichen Werte immer trotz der Eingänge zu verschiedenen Farben zu ändern.

Was ich getan habe

Die CSS-Datei, die bereits heruntergeladen Wesen existiert und alle Farben, dass entsprechen verschiedenen Elemente werden über CSS Variablen erfolgen.

Ich bin Aktualisierung der Änderungen live von den folgenden tun.

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

Dann holte ich das Stylesheet aus dem Server, packte all CSS-Variablen und ersetzt sie mit ihrem tatsächlichen Wert (hex Farbwert).

Danach bekomme ich den Rückgabewert (neu Sheet ohne Variablen) und es für die Daten URI gesetzt.

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

Ich habe bereits einen Download-Button Setup in meinem HTML und ich packte es früher in meinem Skript, so dass sie überall verfügbar waren für mich zu verwenden. downloadBtn

Ich habe die Taste, um Feuer und griff nach dem neuen Blatt.

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

Das Ergebnis

Ich bekomme die ersten Farbwerte des Sheet trotz der Farben auf der Seite innerhalb der Farbeingänge ändern. So ist die CSS-Datei wird, bevor nicht mit den neuen Farben aktualisiert ich die Datei herunterladen.

Veröffentlicht am 13/01/2020 um 23:54
quelle vom benutzer
In anderen Sprachen...                            


1 antworten

stimmen
0

Sie könnten PHP verwenden, um die Werte zu einer neuen Seite zu übergeben. Angenommen, Sie haben die Farben wählen möchten, dass Sie dann auf eine Schaltfläche klicken, der sagt „Generieren“, das Sie auf den „Gene Seite“ nimmt.

Die Werte würden direkt in den HTML übergeben werden und Sie würden stattdessen aus der Generieren-Seite herunterladen.

Dies ist, wenn Sie PHP natürlich wissen, nur einen Vorschlag, wie man es lösen könnte.

(Würde sagen, aber kann nicht aufgrund Ruf)

Beantwortet am 14/01/2020 um 00:20
quelle vom benutzer

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