11521 sujets

JavaScript, DOM et API Web HTML5

Probleme changement fichier css selon l'heure

Bonjour,

J'ai un gros probleme, je doit rendre un site demain et il me reste juste a faire changer le css du site en fonction de l'heure, mais ca ne marche pas, si quelqu'un peut m'aider ca serait super, je vous fournie le html dans lequel j'ai mit le javascript, je sais pa spourquoi ca ne marche pas, peut-être un probleme de placement...
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>RV</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="CSS/accueil2.css" rel="stylesheet"/>
<link rel="icon" type="image/jpg" href="img/logo.png" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" >
<script type="text/javascript" src="jquery-3.1.1.js"></script>
<script>
<!--
function getStylesheet() {
var currentTime = new Date().getHours();
if (8<= currentTime&&currentTime <20) {
document.write("<link rel='stylesheet' href='CSS/jour/accueil2.css' type='text/css'>");
}
if (20<= currentTime&&currentTime < 8) {
document.write("<link rel='stylesheet' href='CSS/nuit/accueil2.css' type='text/css'>");
}
}
getStylesheet();
-->
</script>
<noscript><link href="main.css" rel="stylesheet"></noscript>
</head>
Modifié par alexis29720 (15 Jan 2017 - 21:37)
Modérateur
Salut,


Tu as regardé ou est-ce que ta balise était insérée une fois le script exécuté ? Je doute qu'elle soit dans le <head> avec un simple document.write()...

Regarde ici coment ils ont fait :
<script type="text/javascript">
var file = location.pathname.split( "/" ).pop();

var link = document.createElement( "link" );
link.href = file.substr( 0, file.lastIndexOf( "." ) ) + ".css";
link.type = "text/css";
link.rel = "stylesheet";
link.media = "screen,print";

document.getElementsByTagName( "head" )[0].appendChild( link );
</script>

Source : http://stackoverflow.com/questions/574944/how-to-load-up-css-files-using-javascript

Le code est pas parfait mais je te laisse faire les ajustements
désolé mais je n'arrive pas a faire les ajustement et j'en ai besoin pour demain... Si tu peut m'aider je te remerciai jamais assez !!
Modérateur
re,

Bon du coup un truc comme ça devrait le faire. Un fois la page chargée regarde dans le code du navigateur que l'appel y est bien.

C'est pas vraiment dans les habitude de ce forum de lâcher du code tout prêt mais bon Smiley langue 

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8"/> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
	<title>RV</title> 
	<link href="bootstrap/css/bootstrap.css" rel="stylesheet"/> 
	<link href="CSS/accueil2.css" rel="stylesheet"/> 
	<link rel="icon" type="image/jpg" href="img/logo.png" />
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" >
	<script type="text/javascript" src="jquery-3.1.1.js"></script>

	<link href="main.css" rel="stylesheet">
	
	<script>

		var link = document.createElement( "link" );
		link.type = "text/css";
		link.rel = "stylesheet";

		var currentTime = new Date().getHours();
		if (currentTime >= 8 && currentTime < 20) {
			link.href = 'CSS/jour/accueil2.css';
		} else {
			link.href = 'CSS/nuit/accueil2.css';
		}
		document.getElementsByTagName( "head" )[0].appendChild( link );

	</script>


</head>
merci beaucoup, bon j'ai essayer en changeant l'heure de mon PC et ca ne marche tjs pas ^^ euuh comment verifier que ca fait appel exactement ? et tu parle du "head" dans la fonction, moi le css doit changer sur toute la page, du coup je laisse comme ca ou pas ?
Modérateur
Salut,

alexis29720 a écrit :
tu parle du "head" dans la fonction, moi le css doit changer sur toute la page, du coup je laisse comme ca ou pas ?

Les balises <link> doivent être dans la balise head comme tu l'as déjà fait avec les autres CSS, Js ou même les icônes.
Sujet clos
Aller à