modifier css a l'aide du JS

Version imprimable

10/11/2010, 18h53
marie-anne

modifier css a l'aide du JS

bonjour tout le monde
J'ai créer 4 css différents(1 pour chaque saison)
En to
J'aimerais ensuite créer un sorte de commande qui fait que si on est en automne il affiche le theme automne.css, si on est hiver il affiche le theme hiver.css de sorte qu'il sait que c'est l'hiver ou l'automne à l'aide de date

Je pense que cela doit ce faire en Javascript mais comment ?
Merci beaucoup beaucoup pour l'aide
10/11/2010, 19h33
Bovino
Non, dans l'idéal, ce serait mieux et plus propre de le faire coté serveur (PHP par exemple).
Sinon, il est possible de vérifier la date avec l'objet Date() et ses méthode getMonth() (attention, le compte des mois commence à 0) et getDate()
Code:

1 2 var today = new Date(); alert(today.getDate() + '/' + (today.getMonth() + 1));
à partir de là, tu peux retrouver la saison et donc la feuille de style à utiliser.
Ensuite tu peux ajouter une nouvelle feuille de style avec
Code:

1 2 3 4 var seasonCSS = document.createElement('link'); seasonCSS.type = 'text/css'; seasonCSS.href = 'season.css'; document.getElementByTagName('head')[0].appendChild(seasonCSS);

bonjour,
merci pour l'aide mais ca n'a pas marché alors j'ai créé une fonction qui retourne le mois et donne la feuilled e style à uriliser mais qu'en même ça ne marche pas,je crois que j'ai fait un erreur de syntaxe
je l'ai mis dans le head de la page
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function saison() { <%--declaration --%> var mois=new int; <%--retourner le mois courant--%> var madate=new date; mois=madate.getmonth; <%--test sur le mois courant--%> if(mois==9 || mois==10 || mois==11 ) { document.write('<link rel="stylesheet" type="text/css" href="CSS\automne.css">');} if (mois==0 || mois==1 || mois==2) {document.write('<link rel="stylesheet" type="text/css" href="CSS\hiver.css">');} if (mois==3 || mois==4 || mois==5) {document.write('<link rel="stylesheet" type="text/css" href="CSS\printemps.css">');} if (mois==6 || mois==7 || mois==8) {document.write('<link rel="stylesheet" type="text/css" href="CSS\été.css">');} }
vous pouvez me mentrer l'emplacement de l'erreur ????merci beaucoup pour l'aide

11/11/2010, 10h29
andry.aime
Bonjour,
Pourquoi tu utilises document.write? c'est déconseillé. Le plus propre c'est d'utilisé la methode proposée par Bovino.

Citation:

var madate=new date;
mois=madate.getmonth;
Code:

1 2 var madate=new Date(); mois=madate.getMonth();
Citation:

CSS\automne.css

Code:

CSS/automne.css

A+.
11/11/2010, 10h55
marie-anne

Merci beaucoup de votre aide.
J'aime bien utiliser la méthode que BOVINO m'a proposé mais je ne sais pas comment l'utiliser pour faire le test

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var madate=new Date(); 
var mois=madate.getMonth();
var seasonCSS = document.createElement('link');
seasonCSS.type = 'text/css';
if(mois <3){
 seasonCSS.href="CSS/hiver.css";
}else if(mois < 5){
 seasonCSS.href="CSS/printemps.css";
} else if(mois < 8){
 seasonCSS.href="CSS/ete.css"; //n'utilise  pas un nom de fichier avec un accent
} else{
 seasonCSS.href="CSS/automne.css";
}
document.getElementByTagName('head')[0].appendChild(seasonCSS);

Citation:
Envoyé par andry.aime
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 var madate=new Date(); var mois=madate.getMonth(); var seasonCSS = document.createElement('link'); seasonCSS.type = 'text/css'; if(mois <3){ seasonCSS.href="CSS/hiver.css"; }else if(mois < 5){ seasonCSS.href="CSS/printemps.css"; } else if(mois < 8){ seasonCSS.href="CSS/ete.css"; //n'utilise pas un nom de fichier avec un accent } else{ seasonCSS.href="CSS/automne.css"; } document.getElementByTagName('head')[0].appendChild(seasonCSS);
merci beaucoup beaucoup mais le meme probleme se pose toujours,le style ne s'applique pas aux pages je ne sais pas si je dois mettre ce code dans la page master ou bien dans chacune des pages et comment faire l'appel à cette fonction+que mon directeur m'a demandé de faire un dossier de theme alors que ca me pose un immense probleme car je suis debutante
desolé pour le derangement et Merci beaucoup de Votre aide

:'(

il faut mettre ce code dans chaques pages

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<script type="text/javascript" language="JavaScript">
 
var madate=new Date(); 
var mois=madate.getMonth();
var seasonCSS = document.createElement('link');
seasonCSS.type = 'text/css';
if(mois <3){
 seasonCSS.href="CSS/hiver.css";
}else if(mois < 5){
 seasonCSS.href="CSS/printemps.css";
} else if(mois < 8){
 seasonCSS.href="CSS/ete.css"; //n'utilise  pas un nom de fichier avec un accent
} else{
 seasonCSS.href="CSS/automne.css";
}
document.getElementByTagName('head')[0].appendChild(seasonCSS);
 
</script>
 
</head>
 
<body>
le contenu le contenu le contenu le contenu
 
</body>
</html>

11/11/2010, 16h13
marie-anne

merci beaucoup pour la reponse

aussi pour eviter de recopier a chaque fois ce code par page on met le code dans un fichier avec l'extension js que l'on nomera pour l'exemple css.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
var madate=new Date(); 
var mois=madate.getMonth();
var seasonCSS = document.createElement('link');
seasonCSS.type = 'text/css';
if(mois <3){
 seasonCSS.href="CSS/hiver.css";
}else if(mois < 5){
 seasonCSS.href="CSS/printemps.css";
} else if(mois < 8){
 seasonCSS.href="CSS/ete.css"; //n'utilise  pas un nom de fichier avec un accent
} else{
 seasonCSS.href="CSS/automne.css";
}
document.getElementByTagName('head')[0].appendChild(seasonCSS);

puis toujour dans chaque page html on appel le fichier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<script type="text/javascript" language="JavaScript" src="css.js"></script>

</head>
<body>

</body>
</html>

MERCI à vous tous en fin de compte je n'ai utilisé que le code ASP.net dans l'evenement page-preinit et ca marche tres bien meme si ca me derange de repeter le code dans chaque page voila le resultat final
et encore merci à tous ceux qui m'ont donné un coup de main ca me servira beaucoup

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 Protected Sub Page_PreInit(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreInit
        Try
            Dim mois As Integer = Format(Now, "mm")
            If mois < 3 Then Page.Theme = "hiver" Else 
            If mois < 6 Then
                Page.Theme = "printemps"
            Else
                If mois < 9 Then
                    Page.Theme = "ete"
                Else
                    Page.Theme = "automne"
                End If
            End If
        Catch ex As Exception
            MsgBox(ex.Message)
        End Try
    End Sub

11/11/2010, 18h13
Bovino

Citation:

Envoyé par Bovino

dans l'idéal, ce serait mieux et plus propre de le faire coté serveur (PHP par exemple).

:aie:
11/11/2010, 19h14
marie-anne

Citation:

Envoyé par Bovino

:aie:

merci bovino mais jusqu'à maintenant je ne sais pas c'est quoi coté serveur " y a encore pleiiiiine choses que je dois apprendre " :(
11/11/2010, 19h35
Bovino

Citation:

Envoyé par marie-anne

je ne sais pas c'est quoi coté serveur

C'est ce que tu fais en asp.net :mrgreen:
En gros, c'est le langage que tu utilises sur le serveur pour créer dynamiquement le contenu généré pour le navigateur (appelé client).

Citation:

Envoyé par marie-anne

" y a encore pleiiiiine choses que je dois apprendre " :(

Bah, sincèrement, comme tout le monde ;)
Celui qui est persuadé de ne plus rien avoir à apprendre est selon moi un gros con prétentieux...

Sauf moi bien sûr qui connait tout sur JavaScript ! :mouarf:
12/11/2010, 00h09
marie-anne

merci bovino ça se voit que j'aurai toujours besoin de votre forum
il est vraiment super merci @ vous pour les immenses efforts que vous faites