Laad css op datum met javascript

Ik ben op zoek naar verschillende css-bestanden te laden op basis van de datum (seizoen).

Ik heb geprobeerd om een ​​afbeeldingsscript te wijzigen van hier op stackoverloop, maar dat werkte niet.

Kan iemand me wijzen waar het mis gaat?

<link href="/css_season/default.css" rel="stylesheet" type="text/css" onload="logo(this)">
function logo(link) {
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if (Month === 4 && (Today >= 1 && Today <= 30)) {
    src = "/css_season/easter.css";
  } else if (Month === 7 && (Today >= 1 && Today <= 31)) {
    src = "/css_season/vacation.css";
  } else if ((Month === 8 && Today >= 30) || (Month === 0 && Today <= 2)) {
    src = "/css_season/vacation.css";
  } else if (Month === 12 && (Today >= 15 && Today <= 31)) {
    src = "/css_season/holidays.css";
  } 
  link.href=href;
}
0
ja ru de
toegevoegd de auteur rene, de bron

2 antwoord

Your assignment link.href=href won't work because href isn't defined. Also, I would put the logo function in <body onload="logo();"> and give your link tag an id attribute.

Dit zou voor u moeten werken:

<html>
<head>
<link id="cssId" href="/css_season/default.css" rel="stylesheet" type="text/css"/>
</head>
<body onload="logo();">
 <!-- body content here -->
</body>

function logo() {
  var d = new Date();
  var Today = d.getDate();
  var Month = d.getMonth();
  var src;
  if (Month === 4 && (Today >= 1 && Today <= 30))
    src = "/css_season/easter.css"; 
  else if (Month === 7 && (Today >= 1 && Today <= 31))
    src = "/css_season/vacation.css";
  else if ((Month === 8 && Today >= 30) || (Month === 0 && Today <= 2))
    src = "/css_season/vacation.css";
  else if (Month === 12 && (Today >= 15 && Today <= 31))
    src = "/css_season/holidays.css";

  document.getElementById('cssId').href=src;
}
1
toegevoegd
Een ander argument voor het plaatsen van onload op de body in plaats van de link : veel browsers bieden nog geen ondersteuning voor onload op link . Toch is er nog ruimte voor verbetering: u zou kunnen stoppen met het gebruik van het attribuut onload en een gebeurtenishandler laden in het script zelf koppelen (HTML van JavaScript scheiden); je kon ook alle stijlen in één CSS-bestand plaatsen en JavaScript een klasse laten plaatsen op de body (in plaats van de geladen CSS te wijzigen) om onderscheid te maken tussen stijlen.
toegevoegd de auteur Mattias Buelens, de bron
Dit <script> en </script> rond het Javascript zal doen.
toegevoegd de auteur fbynite, de bron
Heel erg bedankt voor de snelle en correcte reactie! Ik zal uitchecken en reageren.
toegevoegd de auteur EncountersM, de bron
Om zeker te zijn, kan ik waarschijnlijk <script type = "text/javascript"> en </script> rond het JavaScript toevoegen?
toegevoegd de auteur EncountersM, de bron
Ik heb het script geprobeerd, maar er lijkt een fout te zijn, er gebeurt niets. Kan het conflicteren met andere jQuery op de pagina? Wat is de structuur om meerdere jQuery's het beste te laden om geen conflicten te hebben?
toegevoegd de auteur EncountersM, de bron

Je hebt een verkeerde toewijzing aan het einde van de js-functie.
link.href = href; moet link.href = src; zijn

Proost

1
toegevoegd