![[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine Hitskin_logo](https://2img.net/i/fa/hitskin/hitskin_logo.png){kind=logo}
Hitskin.comThis is a Hitskin.com skin preview
Install the skin • Return to the skin page
Pealeht[LAHENDATUD / ÕPETUS] Javascriptiga CSS-i vahetamine
Lehekülg 1, lehekülgi kokku 1 • Share
- Ekux
- Liitus : 25/08/2016
Postitusi : 1383
Ekux 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:
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):
- Teretere, olen nüüd 2 päeva ühe asja kallal olnud ja pea kärssab otsas ja juuksed on krussis ja aknast olen juba mitu korda välja hüpanud, aga esimesel korrusel elades pole sellestki erilist tolku olnud.
Viimases hädas siis pöördun siia.
Nimelt tahan veebilehele lisada "dark mode" ning selle tegemiseks olen läinud enda arust kõige lihtsamat ja loogilisemat teed: teinud lehele eraldi CSS-i faili, mis sisaldab siis tumedamat kujundust ning seda saab "sisse lülitada" ühe lihtsa nupuga, mille paneb tööle Javascript.
HTML:
- Kood:
<button onclick="swapStyleSheet('dark.css')">Darkmode</button>
<button onclick="swapStyleSheet('light.css')">Lightmode</button>
Js:
- Kood:
function swapStyleSheet(sheet){
document.getElementById('pagestyle').setAttribute('href', sheet);
}
See toimib, nupud töötavad nagu vaja, minu mure seisneb aga selles, et Javascript teatavasti unustab pärast igat refreshi kõik nupuvajutused ära ja iga kord tuleb darkmode'i jaoks jälle nupule vajutada.
Olen nüüd kahe päeva jooksul proovinud igasuguseid asju ise välja mõelda ja ka Google'i abiga ei ole suutnud seda asja tööle saada.
Lahenduste märksõnadeks on olnud localStorage, sessionStorage, cookies, aga siiani pole ükski asi tööle hakanud nii nagu mul vaja on.
On kellelgi ehk kogemust sarnase asjaga?
Viimati muutis seda Ekux (12.01.21 5:50). Kokku muudetud 3 korda
- Tonight
- Liitus : 19/02/2012
Postitusi : 18000
Tonight 04.05.20 22:49
Favali Javascript:
Süvene.
- 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.
- Ekux
- Liitus : 25/08/2016
Postitusi : 1383
Ekux 05.05.20 9:15
Tänks @Tonight, ma arvan, et see aitas päris palju õigele teele 
Küll aga olen nüüd sellise künka otsas kinni, millele ei oska isegi nime anda.
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?
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?
- Ekux
- Liitus : 25/08/2016
Postitusi : 1383
Ekux 05.05.20 10:45
Sain tööle, viga oli ilmselgelt minus, lihtsalt ei ole veel piisavalt kogenenud Javascriptiga 
Töötab!!!
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');
}
- Ekux
- Liitus : 25/08/2016
Postitusi : 1383
Ekux 05.05.20 15:15
Ja tegin veel lõpliku viimistluse sellele skriptile, muutes kaks nuppu üheks, mis siis muutub vastavalt eelistatud kujundusele
CSS
HTML
Javascript
+pärast nupu HTML koodi, et asi õige oleks:
Javascript:
Uuendasin ka esimest postitust, rohkem õpetuse moodi asi nüüd
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
- Ekux
- Liitus : 25/08/2016
Postitusi : 1383
Ekux 12.01.21 5:53
Muudatus:
avastasin täna ja soovitan kasutada hoopis
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.
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.
Soovid vestluses osaleda?
Selleks logi sisse või tee endale kasutaja.
Lehekülg 1, lehekülgi kokku 1
Permissions in this forum:
Sa ei saa vastata siinsetele teemadele