Sujet Précédent Sujet Suivant

Modifier CSS à l'aide de JS

Résolu/Fermé
waoumita Messages postés 73 Date d'inscription samedi 21 mars 2009 Statut Membre Dernière intervention 31 mai 2011 - 10 nov. 2010 à 19:35
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 - 11 nov. 2010 à 18:05
Bonjour,
j'ai crée 4 CSS de sorte que l'une s'active automatiquement à l'automne
la 2eme à l'hiver
la 3eme au printemps et la 4eme en été
le principe c'est faire un test sur la date et le CSS se modifie automatiquement
je sais que ca se fait à l'aide de javascript mais je ne sais pas comment faire
aidez moi SVP


A voir également:

15 réponses

Réponse 1 / 15
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
10 nov. 2010 à 20:07
bonjour je te met un petit exemple avec la couleur d'arrière plan 
<script>
if (test)
document.body.style.Backgroundcolor ="red" ;
</script>

mais si tu vise de faire d'autre style tu dois apprend le JS
0
Réponse 2 / 15
Fallentree Messages postés 2309 Date d'inscription mercredi 25 février 2009 Statut Membre Dernière intervention 22 juillet 2019 208
10 nov. 2010 à 20:30
en php, un switch sur la semaine de l'année

$date=format("W",time()); // format(time(),"d-m");
switch $date{
case < semaine(printemps); //ou 21/03
chargerlecss();
break;
...
}

Biensur la redaction est plus que rapide...
0
Réponse 3 / 15
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
10 nov. 2010 à 20:45
oui sinon tu peut faire ce que tu veut que avec du php
tu dois utilisé du php dedans le fichier style css mais tu enregistre le fichier style avec l'extension .php pas. css
voila un petit exemple qui charge aléatoirement un image de fond pourtant les nom (1.jpg,2.jpg,3.jpg) 
<?php
header('content-type: text/css');  
$fond = rand(1,3); 
?> 
body { 
background:url("<?php print $fond; ?>.jpg"); 
}
0
Réponse 4 / 15
Bilow Messages postés 1022 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 117
10 nov. 2010 à 21:43
Salut !

Pour modifier et ajouter des éléments CSS en Javascript, il y a une solution : 

function css(objet, attribut, valeur){
// css("body", "background", "white")
if(document.styleSheets[0].insertRule){
var cssType;
if(document.styleSheets[0]['rules']){
cssType = 'rules';
}
else if(document.styleSheets[0]['cssRules']){
cssType = 'cssRules';
}
document.styleSheets[0].insertRule(objet + ' { '+ attribut +': '+ valeur +'; }', document.styleSheets[0][cssType].length);
}
else if(document.styleSheets[0].addRule){
document.styleSheets[0].addRule(objet, attribut + ': '+ valeur +';');
}
}


ATTENTION : Ce code plantera s'il n'y a aucune feuille de style sur la page (document.styleSheets[0]vaut NULL); Pour que ce code fonctionne alors qu'il n'y a aucun style déclaré (<style> ou <link rel="stylesheet">), il faut simplement rajouter cette balise. Bref, rajouter <style></style> ;

Voila !
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 15
waoumita Messages postés 73 Date d'inscription samedi 21 mars 2009 Statut Membre Dernière intervention 31 mai 2011
Modifié par waoumita le 11/11/2010 à 00:36
merci pour vos reponses mais ce que je veux faire ce n'est pas modifier les elements du CSS mais modifier toute la feuille de style chaque saison
0
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
11 nov. 2010 à 01:09
regard tu crée un fichier style.php pas style.css 
header('content-type: text/css');  
$date = ??
    switch ($date) {
        case (la date) : ?>  code CSS automne <?php ; break;
	case (la date) : ?>  code CSS hiver <?php ; break;
        case(la date) : ?>  code CSS  printemps <?php ; break;
	case (la date): ?>  code CSS été <?php ; break;
		}

pour $date = ?? => tu dois utilisé un fonction qui renvoie le mois courant , je met des ?? parque je connais spas une tu dois cherche
0
Réponse 6 / 15
waoumita Messages postés 73 Date d'inscription samedi 21 mars 2009 Statut Membre Dernière intervention 31 mai 2011
11 nov. 2010 à 10:23
merci beaucoup ca parait interessant mais le probleme c'est que je suis en stage et mon chef m'a demandé de ne faire que du CSS et javascrip c'est ça le problème maintenant j'ai mes quatres feuilles de style, je dois faire le test de la date à l'entete du page c àd le head mais qu'en même ça marche pas vous pouvez rectifier mes erreurs ? il m'a dit ca change just par mois 

function saison()
{
<%---variable mois-----%>
var mois=new int;
<%---retourner le mois courant -----%>

var madate=new date; 
mois=madate.getmonth;
<%---test sur le mois -----%>

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

}
0
Réponse 7 / 15
Bilow Messages postés 1022 Date d'inscription samedi 21 août 2010 Statut Membre Dernière intervention 2 août 2015 117
11 nov. 2010 à 12:31
Il faut faire un include de CSS en Javascript.C'est à dire, ajouter une feuille de style dans le head de la page, mais correctement, sans passer par write() ou l'attribut innerHTML. Solution : 

<html>
<head>
<title>Hello !</title>
<script type="text/javascript">

function include_css(src){

var temp_style = document.createElement('link');
temp_style.type = 'text/css';
temp_style.href = src;
temp_style.rel = 'stylesheet';
var temp_head = document.getElementsByTagName('head').item(0);
temp_head.appendChild(temp_style);

}

</script>
</head>
<body>
<p><a href="javascript:include_css('monstyle.css')">CSS</a></p>
</body>
</html>


include_css('monstyle.css') appliquera le style qu'il y a dans monstyle.css ; Il s'ajoutera, mais ne supprimera pas les anciens attributs CSS. Pour cela, il faudra redéclarer les même attributs avec leur valeur par défaut, dans le nouveau style.
0
Réponse 8 / 15
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
11 nov. 2010 à 12:57
re corrige l'objet date 
var madate = new Date()
var mois = madate.getMonth()
moi ++;
alert (mois);

j ai incrémenté le mois++ parque les mois commencent à 0 pour Janvier
0
Réponse 9 / 15
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
11 nov. 2010 à 13:05
voila ton code prêt a être employé ,sans utilisé une fonction pour cela 
<head>
<script type="text/javascript">
var Date = new Date()
var mois = Date.getMonth()
mois++;
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">');}
</script>
</head>
0
Réponse 10 / 15
waoumita Messages postés 73 Date d'inscription samedi 21 mars 2009 Statut Membre Dernière intervention 31 mai 2011
11 nov. 2010 à 13:40
merci beaucoup beaucoup jalalnet maintenant j'ai tout ce qu'il faut mais en dernier temps mon chef a changé d'idée et m'a demandé de faire des dossiers de theme " automne CSS+ skin " et ainsi de suite
alors je ne sais plus ou mettre cette fonction est ce que dans le global.asax ou sur toutes les pages merci beaucoup
voila la fonction que je vais utiliser mais ou la mettre ?? aucune idée 
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"; } else{
 seasonCSS.href="CSS/automne.css";
}
document.getElementByTagName('head')[0].appendChild(seasonCSS);
0
Réponse 11 / 15
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
Modifié par jalalnet le 11/11/2010 à 14:21
je pense tu dois mettre le code dans une page externe puis tu inclure le fichier dans l'ensemble des pages 
<?php include("page.php"); ?>
0
Réponse 12 / 15
waoumita Messages postés 73 Date d'inscription samedi 21 mars 2009 Statut Membre Dernière intervention 31 mai 2011
11 nov. 2010 à 14:42
non je ne dois pas utiliser du php
just le javascript et le asp.net mais je ne sais pas comment faire
0
Réponse 13 / 15
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
Modifié par jalalnet le 11/11/2010 à 15:10
<head> 
<script type="text/javascript" src="le script.js"></script>

<head>
0
Réponse 14 / 15
waoumita Messages postés 73 Date d'inscription samedi 21 mars 2009 Statut Membre Dernière intervention 31 mai 2011
11 nov. 2010 à 17:16
desolé jalalnet
mais après tout ca, j'ai arrivé à trouver une solution à l'aide de asp.net meme je l'ai testé et ça marche tres bien
merci pour ton aide c'etait vraiment tres tres gentil
0
Réponse 15 / 15
jalalnet Messages postés 294 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 30 juillet 2023 10
11 nov. 2010 à 18:05
pas de quoi
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
[CSS] Forcé retour à la ligne
aKuma59 -
zigoss -

33 réponses
pas d'impression car pas d'encre couleur
cyllen -
STARGATE43 -

12 réponses
Documents scannés à modifier, photoshop et toutiquanti ...
Bebelle007 -
Khadija -

4 réponses