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

Jsou zobrazeny jen nové odpovědi. Zobrazit všechny

Předmět	Autor	Datum
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

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