Modifier le code CSS en JavaScript

**EIN-LESER** · 11/11/2008, 17h56

Bonjour a tous.
Je sais pertinemment que mon topique est pas vraiment dans la bonne rubrique mais je me suis permis de le poster ici car je n’ai pas vu d’endroits réserves pour sa.
En espérant que vous me pardonnerez

!
J’e débute en html css et JavaScript et j’ai un petit problème avec un de mes projets.

En fait ce que j’aimerais faire c’est afficher une page internet avec un fon d’écran plus quelques autres éléments dont un bouton.
C’est la que sa se corse lol.
Ma question : est-il possible de mettre du css dans une fonction JavaScript ?

Je m’explique :
Le truc que j’aimerais réunir c’est que le fond d’écran de ma page internet soit remplace par un autre fond d’écran mais sans changer la page.
Donc agir avec la fonction qui est appelé par mon bouton directement sur propriété background-image du CSS.
Pour ce faire j’ai mis cette fonction dans le heat et non pas dans la page CSS que j’utilise pour le reste de la page mais je loque.
Pleas help merci d’avance

**foolib** · 12/11/2008, 02h06

Pour modifier un élément de ta page, il faut récupérer un "pointeur" sur celui-ci, ce qui te permet d'accéder par la suite aux propriétés de style comme les bords le fond etc. via javascript :
Admettons pour l'exemple qu'il s'agisse d'un div dont l'id est "cible" ... tu as donc dans ta page html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="cible">
...contenu...
</div>

Une manière pour accéder à cet élément en javascript est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('cible');

Tu peux alors écrire par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var mondiv=document.getElementById('cible');
mondiv.style.backgroundImage="url(images/fond.png)";
mondiv.style.backgroundRepeat="repeat";

L' URL de l'image est soit absolue, soit relative au script.
Tu peux accéder à toutes les propriétés css via javascript, les attributs composés comme background-image sont transformé : le tiret disparait et le second mot prend une majuscule "background-image" devient "backgroundImage".
Il ne te reste plus qu'à créer une fonction suivant tes besoins et mettre sur ton bouton un évènement onclick="tafonction();

**EIN-LESER** · 12/11/2008, 08h39

Le probleme dans mon cas c'est que je n'ai pas d'id ou de class car c'est sur le heat que je voudrais agir.

Voici le code sa sera moins therorique ^^

Le HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="Style1.css" rel="stylesheet" type="text/css">
 
 
<script>
 
	  function getDate(strDate){	  
 
		if(!isNaN(strDate.substring(0,2))&& !isNaN(strDate.substring(3,5))&& !isNaN(strDate.substring(6,10))&&strDate.length==10 )
		{
		day = strDate.substring(0,2);
		month = strDate.substring(3,5);
		year = strDate.substring(6,10);
		d = new Date();
		d.setDate(day);
		d.setMonth(month-1);
		d.setFullYear(year);
		d.setHours(0);
		d.setMinutes(0);
		d.setSeconds(0);
		document.getElementById('premiereligne').innerHTML= document.getElementById('prenom').value;
		document.getElementById('secondeLigne1').innerHTML="Vous etes actuellement agée de ";
		document.getElementById('secondeLigne2').innerHTML=" jours!";
		document.getElementById('premiereligne1').innerHTML="Désolé de de dévoir vous anoncer sa  ";
		document.getElementById('premiereligne2').innerHTML=" mais";
 
		return d;
		}
		else
		{
		alert('Veuillez saisir la date sous forme de jj/mm/aaaa s.v.p !');
		document.getElementById('affichageChangant').innerHTML=' ';
		document.getElementById('premiereligne').innerHTML= document.getElementById('prenom').value;
		document.getElementById('secondeLigne1').innerHTML="";
		document.getElementById('secondeLigne2').innerHTML="";
		document.getElementById('premiereligne1').innerHTML="";
		document.getElementById('premiereligne2').innerHTML="";
		}
 
	  }
 
	  function clic(){
 
	  document.getElementById('affichageChangant')
    .innerHTML=' '+ parseInt((((((Aujourdhui-getDate(document.getElementById('datenaiss').value))/1000)/60)/60)/24));
	  }
 
 
 
	  function compare(date_1, date_2){
	    diff = ((((date_2.getTime()-date_1.getTime())/1000)/60)/60)/24;
	    return diff;
	  }
 
	  function changeaffiche()
 	{
 
	 }
 
	  	var Aujourdhui = new Date();
		var nombreDeJours;
		var repuser;
		var dateRepUser;
 
	</script>
 
</head>
 
<body class="body">
<p class="body">&nbsp;</p>
<p><br/><br/><br/><br/><br/><br/><br/></p>
<p class="cadre1" align="center"> Quel est votre prenom?<br/>
  <textarea id="prenom"></textarea>
  <br/>
  Quel est votre date de naissance?<br/>
  <textarea id="datenaiss" title="jj/mm/aaaa"></textarea>
  <br/>
  <input id="clic" type="button" value="Valider" onClick="javascript:clic();" />
  <br/>
  <span id="premiereligne1"> </span><span id="premiereligne"> </span><span id="premiereligne2"> 
  </span><br/>
  <span id="secondeLigne1"></span><span id="affichageChangant"></span><span id="secondeLigne2"></span>	
</p> 
 
 
</body>
</html>

Le CSS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
/* CSS Document */
body
{
	background-image: url("Paradise_1280.jpg");
	text-align: center;
 
}
 
 
 
.cadre1
{
border: 4px double black;
background-color: rgb(211,211,211);
max-width: 300;
min-width: 300;
margin: auto;
 
 
 
 
}
 
#affichageChangant
{
text-decoration: blink;
color: red;
}
 
#premiereligne
{
text-transform: capitalize;
font-style: italic;
}
 
#prenom
{
	height: 20px;
}
 
#datenaiss
{
	height: 20px;
	max-width: 85px;
	min-width: 90px;
}

Voila mon problem c'est que j'aimerais modifier mon fond du head quand on clique sur le bouton click (je sais l'invention de noms d'id c'est pas mon fort

)
J'ai essaye de mettre la comande CSS de fond inital dans le head au lieu du document CSS et sa marche mais j'arrive pas a la changer dans la function getDate()

Voila en esperant que quelqun a une idee car moi je seche ^^
Merci d'avance

**foolib** · 12/11/2008, 09h36

Bon ...
Parles tu réellement de la balise <head></head> du document xhtml ?
cette balise n'est pas sensée être visible seul le contenu du body contient la partie visible par le visiteur.

-->Par ailleurs j'ai parcouru ton code, et des erreurs de syntaxes peuvent impliquer une interprétation partiel ou même absente de la part du navigateur.
Par exemple les valeurs dans la CSS doivent avoir une unité.
-->La balise script doit avoir l'attribut type renseigné : type="text/javascript"
-->la classe body n'est pas défini dans ta css, seule la balise body l'est : en ce sens, l' attribut class="body" ne sert à rien.

Puisque tu te dis débutant, pour de bonnes bases, je me permet de te conseiller si tu ne les connnais pas déjà les cours et tutoriels Javascript et la FAQ JavaScript.

**EIN-LESER** · 12/11/2008, 09h41

autemps pour moi lol comme dit je debute

C'est bien la balise body dans la quelle je voudrais modifier le fond
au fait queston bete est il possible de donner une id au body ?

Je vais tester sa

je crois bien que je suis plus cruche que je le croiais arf

**jojosbiz** · 12/11/2008, 09h48

Salut,
première remarque, ta balise <body> a une classe "body" qui n'est pas définie dans ton css.
Classe utilisée ou oubli en mettant le code ?
Car dans ton css, ce n'est pas cette classe qui permet de donner un fond au body.

Sinon, tu peux atteindre cette balise avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var objBody = document.getElementsByTagName("body").item(0);

et ensuite lui définir une image de fond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
objBody.style.background = "url(<une image au choix>)";

**marcha** · 14/11/2008, 16h41

Envoyé par jojosbiz

Sinon, tu peux atteindre cette balise avec ce code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var objBody = document.getElementsByTagName("body").item(0);

et ensuite lui définir une image de fond :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
objBody.style.background = "url(<une image au choix>)";

Ou plus simplement document.body qui est fait pour ça.

document.body.style.background = "url(<une image au choix>)";

**EIN-LESER** · 15/11/2008, 16h20

Genial
merci mille fois c'est exactement ce qu'il me falais

Modifier le code CSS en JavaScript

JavaScript

Discussions similaires

Partager

Partager