CSS stilleri getirilirken dosyası önce güncellemeyecektir

oy
0

Amaçlanan Hedef - Kullanıcı seçer farklı çeşitli renk girişlerinden renkler ve kendi tema yaratır. Renkler seçildikten sonra, kullanıcı indirme düğmesini tıklar ve o / o seçti renklerle oluşturulan CSS dosyasını alır.

Sayı - CSS dosyasını indirmek mümkün değilim, ama farklı renklere girdileri değiştirerek rağmen orijinal değerleri alıyorum.

Ne Done ettik

indirilmekte olan CSS dosyası zaten var ve farklı unsurlara karşılık gelir CSS değişkenler vasıtasıyla yapılması renklerin hepsi.

Ben Aşağıdaki yaparak canlı değiştirir güncelliyorum.

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

Sonra ben, sunucudan stil getirilen tüm CSS Değişkenler yakaladı ve onların gerçek değerine (onaltılık renk değeri) ile değiştirmiştir.

Bundan sonra, (değişkenler olmadan yeni stil) dönüş değeri var ve verilerin URI'sının ayarlayın.

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

Zaten HTML bir indirme düğmesi kurulum var ve beni kullanmak için kullanılabilir her yerde oldu böylece benim komut önceki kaptı. downloadBtn

Ateşe için düğmeye kurmak ve yeni bir sayfa yakaladı.

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

Sonuç

Ben sayfadaki renk girdiler içindeki renkleri değişen rağmen stil başlangıç ​​renk değerlerini olsun. CSS dosyası yeni renklerle güncellenmektedir değil Yani dosyayı indirmeden önce.

Oluştur 13/01/2020 saat 23:54
kaynak kullanıcı
Diğer dillerde...                            


1 cevaplar

oy
0

Yeni bir sayfaya değerler geçirmek için PHP kullanabilirsiniz. Let Diyelim ki daha sonra "Generate Sayfa" götürür o "Oluştur" yazan bir düğme tıklayın istediğiniz renkleri seçti söylüyorlar.

değerleri HTML içine doğrudan pas geçilebileceğini ve bunun yerine üret Sayfasından indirmek olacaktır.

Eğer, tabii ki bunu çözebilir nasıl sadece bir öneri PHP biliyorsanız budur.

(Yorum, ancak itibarına can dolayı olmaz)

Cevap 14/01/2020 saat 00:20
kaynak kullanıcı

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