javascript - načítanie externého CSS za podmienky

zatial som to riešil takto:

if (podmienka)
        {
            element.style.property1 = value1
            element.style.property2 = value2
        }
    else
        {
            element.style.property1 = value3
            element.style.property2 = value4
        }

ale ako toto napísať tak aby medzi {} bol len odkaz na súbor CSS a v tom externom súbore CSS boli napísané property a value?

jakoby

if (podmienka)
    {
        načítaj CSS 'style1.css';
    }
else
    {
        načítaj CSS 'style2.css';
    }

Předmět	Autor	Datum
Např. takto: https://otaqui.com/blog/1263/simple-script-to-load -css-from-javascript/ Wikan 13.04.2017 21:00	Wikan	13.04.2017 21:00
je to takto správne a optimálne? function archon() { function loadcss(link) { var head = document.g… Mlocik97 13.04.2017 22:41	Mlocik97	13.04.2017 22:41
V tomhle případě bych staticky načetl oba soubory a JavaScriptem bych jenom nastavoval class, pomocí… Wikan 13.04.2017 23:09	Wikan	13.04.2017 23:09
nie som si istý, čo myslíš (najmä to v jednom súbore, to prepínanie ešte asi chápem). Môžem vidieť n… Mlocik97 13.04.2017 23:17	Mlocik97	13.04.2017 23:17
.prvni div { font-color: black; } .druhy div { font-color: red; } A prostě jen přepínáš třídy prvni… Wikan 13.04.2017 23:24	Wikan	13.04.2017 23:24
Aha,to uz vhapem ale to asi v mojom pripade nebude dobre riesenie, totiz tu mam este dalsiu vec ktor… Mlocik97 13.04.2017 23:48	Mlocik97	13.04.2017 23:48
Co tím konkrétně myslíš? nový Wikan 14.04.2017 09:04	Wikan	14.04.2017 09:04
Nevím jestli je to co chceš ani jestli je to košér, ale dělám to takto a používám pro různé styly př… Rce 14.04.2017 00:28	Rce	14.04.2017 00:28
Taky možnost. I když zrovna pro tisk bych spíš použil tohle a vykašlal se na JS: <link rel="stylesh… Wikan 14.04.2017 09:04	Wikan	14.04.2017 09:04
Jasně, máš pravdu. Já to však chtěl aby to fungovalo zároveň jako náhled. poslední Rce 15.04.2017 00:40	Rce	15.04.2017 00:40
Alebo možno ešte lepšie bude ak by som mal index.html <!DOCTYPE html> <html> <head> ... <link rel=… nový Mlocik97 14.04.2017 11:18	Mlocik97	14.04.2017 11:18
V tom případě můžeš použít řešení od Rce. Ale jinak se tohle obvykle řeší nastavováním třídy. nový Wikan 14.04.2017 11:22	Wikan	14.04.2017 11:22
ešte ma napadol spôsob: ... if (podmienka) { $(document).ready(function(){ $("head").load("style2.c… nový Mlocik97 14.04.2017 11:46	Mlocik97	14.04.2017 11:46

Např. takto: https://otaqui.com/blog/1263/simple-script-to-load -css-from-javascript/

je to takto správne a optimálne?

function archon() {
    function loadcss(link) {
        var head = document.getElementsByTagName('head')[0],
            link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = url;
        head.appendChild(link);
        return link;
    }
    var shift = (window.pageYOffset || document.documentElement.scrollTop) - (document.documentElement.clientTop || 0);
    if (shift > 100) {
        loadcss('alternative-style.css');
    }
    else {
        loadcss('style.css');
    }
}
window.onscroll = archon;

V tomhle případě bych staticky načetl oba soubory a JavaScriptem bych jenom nastavoval class, pomocí které by se mezi nimi přepínalo. Nebo ještě lépe bych to měl v jednom souboru.

nie som si istý, čo myslíš (najmä to v jednom súbore, to prepínanie ešte asi chápem). Môžem vidieť nejakú ukážku?

.prvni div { font-color: black; }
.druhy div { font-color: red; }
A prostě jen přepínáš třídy prvni a druhy.

Aha,to uz vhapem ale to asi v mojom pripade nebude dobre riesenie, totiz tu mam este dalsiu vec ktora "zameriava" konkretny div.

Co tím konkrétně myslíš?

Nevím jestli je to co chceš ani jestli je to košér, ale dělám to takto a používám pro různé styly při kliku na "Zobrazit pro čtení" či "Zobrazit pro tisk" (můžeš vyzkoušet třeba tady: http://turistika.arkotechnik.cz/Reports/R_019_Dnem Rybnika/R_019_DnemRybnika.html (tlačítka jsou na konci). Ber to pro inspiraci, přizpůsob své potřebě:

V <head> mám natažení takto dvou stylů (začne fungovat ten druhý) a načtení javascriptu:

<link rel="stylesheet" id="Druhy" href="../../Styles/Muj_Cerny_Pro_Tisk_Rce.css" type="text/css">
<link rel="stylesheet" id="Prvni" href="../../Styles/Muj_Barevny_Pro_Zobrazeni.css" type="text/css">
<script type="text/javascript" src="../../Java/EnableStyl.js"></script>

Dále mám ve výše uvedeném extra souboru "EnableStyl.js" javascript:

function PovolStyl (Povol, Zakaz)  {
	document.styleSheets [Zakaz].disabled = true;
	document.styleSheets [Povol].disabled = false;
}

A tlačítka pro změnu styly mám takto:

<button title="Kliknutím zobrazíte aby se to dobře vytisklo" type="button" onclick="PovolStyl (0, 1)">Zobrazit pro Tisk</button>
<button title="Kliknutím zobrazíte hezké pro čtení očima" type="button" onclick="PovolStyl (1, 0)">Zobrazit pro čtení</button>

Taky možnost. I když zrovna pro tisk bych spíš použil tohle a vykašlal se na JS:

<link rel="stylesheet" href="../../Styles/Muj_Cerny_Pro_Tisk_Rce.css" type="text/css" media="print" />

Jasně, máš pravdu. Já to však chtěl aby to fungovalo zároveň jako náhled.

Alebo možno ešte lepšie bude ak by som mal

index.html

<!DOCTYPE html>
<html>
    <head>
        ...
        <link rel="stylesheet" href="style.css">
        ...
        <script src="archon.js">
    </head>
    <body>
        ...
    </body>
</html>

archon.js

if (podmienka)
    "okrem style.css načítaj aj style2.css"
else
    "je načítaný iba style.css"

s tým že by sa style2.css načítaval tak, že definície vo vnútri by prepísali tie pôvodné načítané z style.css jakoby:

v style.css bolo napríklad že text1 má byť červenou farbou text2 má byť modrou farbou
a v prípade splnenej podmienky by text1 bol červenou ale text2 by už bol zelenou, lebo v style2.css by bolo definované že má byť zelenou, aj keď v style1 je pre ten samý text definovaná modrá.

Snaď chápete... ale s tým že vlastne keď podmienka prestane platiť tak prestane byť style2.css aktívny (zase bude text2 modrou)... teda style1 by bol aktívny neustále a style2 by bol aktívny len v prípade že podmienka je splnená.

nechcem meniť "div" ale skôr CSS, resp. hodnoty pre daný property...

ma napadlo že by som to zapísal takto:

...
if (podmienka)
    loadcss('style.css') && loadcss('alternative-style.css');

V tom případě můžeš použít řešení od Rce.
Ale jinak se tohle obvykle řeší nastavováním třídy.

ešte ma napadol spôsob:

...
if (podmienka) {
    $(document).ready(function(){
        $("head").load("style2.css");
    });
}

alebo

if (podmienka) {
   $( {
      rel: "stylesheet",
      href: "style2.css"
   }).appendTo("head");
}

len potom ak znova prestane platiť podmienka tak aby sa prestalo používať style2.css

inak ďakujem, ak ebude fungovať tak vyskúšam to od RCE

Zpět do poradny Odpovědět na původní otázku Nahoru