Faval on vabaajafoorum, mis sisaldab suurtes kogustes Counter-Strike teadmisi.

[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine

 :: IT-maailm :: Infotehnoloogia :: IT õpetused

Vaata eelmist teemat Vaata järgmist teemat Go down

[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine Empty [LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine

#136174
Ekux
Ekux

Liitus : 25/08/2016
Postitusi : 1383

PostitamineEkux 04.05.20 22:43

Javascriptiga CSS-i vahetamine võib kujuneda vajalikuks kui on näiteks soov veebilehele lisada "dark mode," mida lihtsa nupuvajutusega ümber saab lülitada.

Et seda saavutada, on vaja kasutada HTML-i, CSS-i ja ka Javascripti järgnevalt:


  • Esmalt tekita enda veebilehe dark mode'i jaoks eraldi CSS fail (näiteks dark.css):
    CSS
    Kood:
    html {
       filter: invert(1) hue-rotate(180deg);
    }

  • Seejärel on vaja HTML failis tekitada ümberlülituse jaoks nupp.
    HTML
    Kood:
    <button id="modenupp" onclick="goDark()">Darkmode</button>

  • Nüüd on vaja see nupp Javascriptiga tööle panna. (lisa HTML faili ülemisse ossa head ja script tagide vahele):
    Javascript
    Kood:
     var isDark = window.localStorage.getItem('isDark'); //loob refreshimise korral kontrolli teostamiseks vajaliku variable
     function goDark(){ //loob funktsiooni, mis rakendub kui vajutatakse nupule "Darkmode"
     document.getElementById('pagestyle').setAttribute('dark.css'); //võtab kasutusele "dark.css" CSS faili
     window.localStorage.setItem('isDark', 'yes'); //salvestab vahemällu info, et kasutaja eelistuseks on darkmode
     document.getElementById('modenupp').setAttribute('onclick','unDark()'); //muudab nupu "lightmode" sisselülitajaks
     document.getElementById('modenupp').textContent='Lightmode'; //muudab nupu peal oleva kirja "Lightmode"-ks
     }
     function unDark(){ //loob funktsiooni, mis rakendub kui vajutatakse nupule "Lightmode"
     document.getElementById('modenupp').setAttribute('onclick','goDark()'); //muudab nupu "darkmode" sisselülitajaks
     document.getElementById('modenupp').textContent='Darkmode'; //muudab nupu peal oleva kirja "Darkmode"-ks
     document.getElementById('pagestyle').setAttribute('light.css'); //võtab kasutusele "light.css" CSS faili
     window.localStorage.setItem('isDark', 'no'); //salvestab vahemällu info, et kasutaja eelistuseks on lightmode
     }

  • Ja viimase asjana on veel vaja, et pärast lehekülje laadimist script kontrolliks, mis on kasutaja eelistus ning võtaks selle põhjal kasutusele vastava CSS faili ja looks vastava nupu.
    Kuskile pärast HTML nupu koodi script tagide vahele Javascript:
    Kood:
     if(isDark === 'yes'){ //kui kasutaja eelistatavaks kujunduseks on darkmode, siis
     goDark(); //käivitab goDark funktsiooni
     }else{ //kui aga mitte, siis
     unDark(); //käivitab unDark funktsiooni
     }



Esialgne postitus (küsimus):


Viimati muutis seda Ekux (12.01.21 5:50). Kokku muudetud 3 korda

[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine Empty Re: [LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine

#136175
Tonight
Tonight

[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine Vetera11
Liitus : 19/02/2012
Postitusi : 18000

PostitamineTonight 04.05.20 22:49

Favali Javascript:
Kood:
(function() {
  window.fae_lightSwitchMode = my_getcookie('fae_light-switch-mode') || 'dark';

  document.write('<style type="text/css">#fae_light-switch-container{margin:6px 0}#fae_light-switch-label{font-weight:700;vertical-align:middle}#fae_light-switch{background-color:rgba(0,0,0,.25);vertical-align:middle;display:inline-block;position:relative;height:26px;width:56px;border-radius:20px;cursor:pointer;overflow:hidden}#fae_light-switch>input{display:none}#fae_light-switch>div{background-color:rgba(255,255,255,.5);position:absolute;top:3px;left:3px;height:20px;width:20px;border-radius:20px;transition:.4s;font-size:13px;font-weight:700;line-height:22px}#fae_light-switch>div:before{content:"ON";margin-left:-24px;color:transparent;transition:.4s}#fae_light-switch>div:after{content:"OFF";margin-left:30px;color:rgba(255,255,255,.5);transition:.4s}#fae_light-switch>input:checked+div{background-color:#FFF;left:33px}#fae_light-switch>input:checked+div:before{color:#FFF}#fae_light-switch>input:checked+div:after{color:transparent}</style>');

  var footer = '.footer-links.left',

      cookie = my_getcookie('fae_light-switch'),
      rgb,
      button,
      container,

      changeTheme = function (cookie) {
        var button = document.querySelector('#fae_light-switch input');

        if ((button && button.checked) || cookie == 'on') {
          my_setcookie('fae_light-switch', 'on', true);

          if (window.sessionStorage && window.sessionStorage.faeLightSwitch) {
            $('head').append('<style type="text/css" id="fae_light-switch-css">' + window.sessionStorage.faeLightSwitch + '</style>');
          } else {
            $.get('https://raw.githubusercontent.com/SethClydesdale/forumactif-edge/master/css/dark-mode/' + fae_lightSwitchMode + '-mode.min.css', function (d) {
              $('head').append('<style type="text/css" id="fae_light-switch-css">' + d + '</style>');

              if (window.sessionStorage) {
                window.sessionStorage.faeLightSwitch = d;
              }
            });
          }

        } else {
          var css = document.getElementById('fae_light-switch-css');

          my_setcookie('fae_light-switch', 'off', true);

          if (css) {
            document.head.removeChild(css);
          }
        }
      };

  cookie && changeTheme(cookie);

  $(function() {
    if (!my_getcookie('fae_light-switch-mode')) {
      rgb = window.getComputedStyle(document.body, null).getPropertyValue('background-color').replace(/rgb\(|\)|\s/g, '').split(',');
      fae_lightSwitchMode = Math.round(((parseInt(rgb[0]) * 299) + (parseInt(rgb[1]) * 587) + (parseInt(rgb[2]) * 114)) /1000) > 125 ? 'dark' : 'light';

      my_setcookie('fae_light-switch-mode', fae_lightSwitchMode, true);
    }

    footer = document.querySelector(footer);

    if (footer) {
      button = document.createElement('LABEL');
      button.id = 'fae_light-switch';
      button.innerHTML = '<input type="checkbox" ' + (cookie == 'on' ? 'checked="true"' : '') + '/><div></div>';
      button.firstChild.onchange = changeTheme;

      container = document.createElement('DIV');
      container.id = 'fae_light-switch-container';
      container.innerHTML = '<span id="fae_light-switch-label">' + (fae_lightSwitchMode == 'dark' ? 'Dark Mode : ' : 'Light Mode : ') + '</span>';

      container.appendChild(button);
      footer.appendChild(container);
    }
  });
}());

Süvene. Kappa

[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine Empty Re: [LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine

#136194
Ekux
Ekux

Liitus : 25/08/2016
Postitusi : 1383

PostitamineEkux 05.05.20 9:15

Tänks @Tonight, ma arvan, et see aitas päris palju õigele teele (Y)

Küll aga olen nüüd sellise künka otsas kinni, millele ei oska isegi nime anda.

Kood:
   <button onclick="goDark()">Dark</button>
   <button onclick="unDark()">White</button>

Kood:
var isDark = window.localStorage.getItem('isDark');
 function goDark(){
 document.getElementById('pagestyle').setAttribute('/dark.css');
 window.localStorage.setItem('isDark', true);
 }
 function unDark(){
 document.getElementById('pagestyle').setAttribute('/undark.css');
 window.localStorage.setItem('isDark', false);
 }
 if(isDark){
 document.getElementById('pagestyle').setAttribute('/dark.css');
 }else{
 document.getElementById('pagestyle').setAttribute('/undark.css');
 }
 window.alert(isDark);

Nagu näete, siis olen lõppu koodu testimiseks pannud window.alert(isDark); mis tähendab, et iga refreshi korral script viskab ette teate, mis sisaldab "isDark" väärtust.
Sellele teatele tuginedes kinnitan, et asi töötab! Vajutades "dark" nupule läheb statement trueks ning vajutades "undark" nupule läheb statement falseks, kõik on nii nagu peab.
Mis on probleem? Kujundus läheb darkiks ja jääb sinna kinni, hoolimata sellest, et statement muutub nupule vajutades falseks ja peaks põhjustama kujunduse heledaks tagasi muutumise.
Ma ei suuda aru saada, kuidas see võimalik on. Sisuliselt üks if/else statement lihtsalt otsustab mitte töötada. Kas keegi oskab midagi välja pakkuda?

[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine Empty Re: [LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine

#136196
Ekux
Ekux

Liitus : 25/08/2016
Postitusi : 1383

PostitamineEkux 05.05.20 10:45

Sain tööle, viga oli ilmselgelt minus, lihtsalt ei ole veel piisavalt kogenenud Javascriptiga :D


Töötab!!! :)
Kood:
      var isDark = window.localStorage.getItem('isDark');
      function goDark(){
         document.getElementById('pagestyle').setAttribute('dark.css');
         window.localStorage.setItem('isDark', 'yes');
      }
      function unDark(){
         document.getElementById('pagestyle').setAttribute('undark.css');
         window.localStorage.setItem('isDark', 'no');
      }
      if(isDark === 'yes'){
         document.getElementById('pagestyle').setAttribute('dark.css');
      }else if(isDark === 'no'){
         document.getElementById('pagestyle').setAttribute('undark.css');
         }

[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine Empty Re: [LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine

#136199
Ekux
Ekux

Liitus : 25/08/2016
Postitusi : 1383

PostitamineEkux 05.05.20 15:15

Ja tegin veel lõpliku viimistluse sellele skriptile, muutes kaks nuppu üheks, mis siis muutub vastavalt eelistatud kujundusele :)

CSS
Kood:
html {
   mix-blend-mode: difference;
}

HTML
Kood:
<button id="modenupp" onclick="goDark()">Darkmode</button>

Javascript
Kood:
 var isDark = window.localStorage.getItem('isDark'); //loob refreshimise korral kontrolli teostamiseks vajaliku variable
 function goDark(){ //loob funktsiooni, mis rakendub kui vajutatakse nupule "Darkmode"
 document.getElementById('pagestyle').setAttribute('dark.css'); //võtab kasutusele "dark.css" CSS faili
 window.localStorage.setItem('isDark', 'yes'); //salvestab vahemällu info, et kasutaja eelistuseks on darkmode
 document.getElementById('modenupp').setAttribute('onclick','unDark()'); //muudab nupu "lightmode" sisselülitajaks
 document.getElementById('modenupp').textContent='Lightmode'; //muudab nupu peal oleva kirja "Lightmode"-ks
 }
 function unDark(){ //loob funktsiooni, mis rakendub kui vajutatakse nupule "Lightmode"
 document.getElementById('modenupp').setAttribute('onclick','goDark()'); //muudab nupu "darkmode" sisselülitajaks
 document.getElementById('modenupp').textContent='Darkmode'; //muudab nupu peal oleva kirja "Darkmode"-ks
 document.getElementById('pagestyle').setAttribute('light.css'); //võtab kasutusele "light.css" CSS faili
 window.localStorage.setItem('isDark', 'no'); //salvestab vahemällu info, et kasutaja eelistuseks on lightmode
 }

+pärast nupu HTML koodi, et asi õige oleks:
Javascript:
Kood:
 if(isDark === 'yes'){ //kui kasutaja eelistatavaks kujunduseks on darkmode, siis
 goDark(); //käivitab goDark funktsiooni
 }else{ //kui aga mitte, siis
 unDark(); //käivitab unDark funktsiooni
 }


Uuendasin ka esimest postitust, rohkem õpetuse moodi asi nüüd :)

[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine Empty Re: [LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine

#145499
Ekux
Ekux

Liitus : 25/08/2016
Postitusi : 1383

PostitamineEkux 12.01.21 5:53

Muudatus:

avastasin täna ja soovitan kasutada hoopis
Kood:
filter: invert(1) hue-rotate(180deg);

mix-blend-mode töötab küll enamasti hästi, kuid võib teatud olukordades buge/glitche tekitada. Näiteks Bootstrapi dataTable ei suuda ära otsustada, mis värvi ta olema peab. Ülalolev kood aga töötab nii nagu vaja, mulle teadaolevalt igas olukorras.

Vaata eelmist teemat Vaata järgmist teemat Tagasi üles

Soovid vestluses osaleda?

Selleks logi sisse või tee endale kasutaja.

Liitu foorumiga

Tee endale kasutaja ning osale aruteludes.


Tee uus kasutaja

Logi sisse

Omad foorumis juba kasutajat? Logi sisse.


Logi sisse

Faval :: IT-maailm :: Infotehnoloogia :: IT õpetused

 
Permissions in this forum:
Sa ei saa vastata siinsetele teemadele
Free forum | ©phpBB | Free forum support | Report an abuse | Cookies | Latest discussions