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

Modifier le code CSS en JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager