modifier feuille de style css via Javascript

**Haoru** · 22/02/2011, 06h57

Bonjour tout le monde,

Je me retrouve avec un probl�me sur le d�veloppement d'un site, et je m'�nerve dessus depuis ce matin, sans trouver d'explication.

Je vous explique ce que c'est :

Tout le long de mon site sur la gauche je veux avoir une image de bamboo.
Elle commence avec le haut du bamboo qui est une image, et ensuite j'ai une autre image du tronc. Je veux donc r�p�ter cette-derni�re en fonction de la hauteur de la page, donc je dois la placer sous ma premi�re image, et � une certaine place pour que l'on ne voit pas une cassure.

Cette frise se retrouve sur tout le site, et comme toutes les pages ne sont pas de la m�me taille je veux pouvoir g�n�rer dynamiquement cette r�p�tition d'images du tronc du bamboo.

Je recherche donc la hauteur g�n�rale de la page, � laquelle je soustrait la hauteur du haut du bamboo, ce qui devrait me laisser la hauteur que le tronc devrait occuper.

Le probl�me c'est que lorsque je regarde sur mon site le script s'ex�cute , mais la valeur de ma hauteur (height) est nulle.

Lorsque que je modifie manuellement la hauteur, via Firebug, l'image est bien l�, avec la bonne largeur, le bon placement.... donc le script �crit bien ce qu'il faut dans le fichier css, mais ne r�cup�re pas ma variable height.

Voici mon code :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
<img src="img/bamboo.png" alt="bamboo" width="158" height="660" style="position: absolute; left: 0; top: 0" />
 
 	<div id="bamboo-infinite">		
	       <script language="javascript">
		var height = document.body.offsetHeight-660;
		document.styleSheets[0].insertRule("#bamboo-infinite {position: absolute;top: 660px;width: 78px;background: url(../img/bamboo-infinite.png) -2px 0 repeat-y;z-index: 1;height :"+height+";}",document.styleSheets[0].cssRules.length);
		</script>
	</div>

Une id�e ?

Merci

**SpaceFrog** · 22/02/2011, 08h17

heu pourquoi pas juste une image raccordable en background repeat ?

**Haoru** · 22/02/2011, 08h21

Heuuu... pardon ?

**SpaceFrog** · 22/02/2011, 08h31

pourquoi tenter de faire avec force javascript ce qui se fait tout simplement avec css ..... ???
mets ton image en background de ton div avec un repeat-x ou repeat-y pour que ton image se r�p�te � l'infini sur l'axe des x ou des y ...
http://plambert.developpez.com/tutor...s/images-fond/

**Haoru** · 22/02/2011, 08h58

Oui solution envisag�e auparavant... sans succ�s je ne sais pas pourquoi, enfin si je pense savoir pourquoi, mais rien ne s'affichait.

Voici mon code avant :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
#bamboo-infinite {
	position: absolute;
	top: 660px;
	width: 78px;
	background: url(../img/bamboo-infinite.png) -2px 0 repeat-y;
	z-index: 1;
}

mais comme il n'y avait pas de hauteur sp�cifi�e, cela revenait au m�me, la div se cr�ait, lorsque je changeait la hauteur sur firebug l'image �tait belle et bien l�.
Mais j'ai besoin de sp�cifier une hauteur de l'image que je ne peux pas faire seulement gr�ce au CSS, puisque la hauteur va changer pour chaque page.

**SpaceFrog** · 22/02/2011, 09h01

peu importe que la hauteur change pour chaque page, le repeat assure le remplissage quelle que soit la hauteur ?...

**Haoru** · 22/02/2011, 09h40

ba dans mon cas non et je ne sais pas pourquoi...
En utilisant le code CSS que j'ai post� juste avant, l'image n'appara�t pas, et lorsque je contr�le avec firebug la div est bien cr��e mais avec une hauteur de 0 donc l'image n'appara�t pas... Un grand myst�re qui me prend la t�te depuis toute la journ�e...

**Haoru** · 22/02/2011, 09h44

Alors que si je sp�cifie une hauteur dans mon CSS l'image appara�t bien

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
#bamboo-infinite {
	position: absolute;
	top: 660px;
        height: 100%
	width: 78px;
	background: url(../img/bamboo-infinite.png) -2px 0 repeat-y;
	z-index: 1;
}

Mais le probl�me ici c'est qu'il r�cup�re la taille de mon site donc l'image devient trop longue car il y a l'image du haut du bamboo qui fait 660px au-dessus, donc �a me fait mon tronc du bamboo qui est 660px trop long...
Il faudrait que je puisse faire : taille du site - 660px, ce que je voulais faire avec mon script javascript.

**SpaceFrog** · 22/02/2011, 09h52

enl�ve ta balise image ...
il ne faut utiliser QUE le background du div ...

**Haoru** · 22/02/2011, 10h11

ma balise image est au dessus du div, c'est celle-ci qui affiche le haut du bamboo, donc j'en ai besoin.
La div en dessous affiche le tronc du bamboo, donc elles n'ont pas de lien.
La balise image n'intervient pas dans le comportement de ma div en dessous

**SpaceFrog** · 22/02/2011, 10h17

ha oki je vois
ben tu conserver l'image de taille fixe dans le haut du div puis utiliser un repeat et un position sur le background image.
colles mois les deux images ici je te fais une demo

**Haoru** · 22/02/2011, 10h20

J'ai chang� cette fois en utilisant deux div pour les images :

HTML :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
<div id="bamboo">
	</div>
 	<div id="bamboo-infinite">	
	</div>

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
#bamboo {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 158px;
	height: 660px;
	background: url(../img/bamboo.png) no-repeat;
	z-index: 0;
}
 
#bamboo-infinite {
	position: absolute;
	top: 660px;
	width: 78px;
	background: url(../img/bamboo-infinite.png) -2px 0 repeat-y;
	z-index: 0;
}

et....... �a ne marche pas... Je ne comprends vraiment pas, � part que le seul attribut qui fait appara�tre ma seconde image est la hauteur lorsque je lui en impose une... donc je pense vraiment que le probl�me vient de l�.

C'�tait quoi le probl�me avec mon script javascript au d�but ? car s'il arrive � r�cup�rer ma variable le tour est jou�.

**SpaceFrog** · 22/02/2011, 10h25

le souci avec le js est que �a n'est pas fait pour �a ...
si js n'est pas activ� tu n'auras pas la bon rendu
un simple css et le tour est jou�

tu dois avoir un div et une image

la balise image est plac�e dans le div et a pour src le haut de l'image
le div a en bg image l'image du bas qui se rep�te en y et un bg position qui le place juste en dessous du l'image ...

envoie plutot tes deux images ...

**SpaceFrog** · 22/02/2011, 10h41

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <title>title</title>
    <style type="text/css">
     body, html {height:100%;}
 
    #tree {height:500px;
               width:100px;
               border:solid 1px red;
               background: url('Tree2.jpg')  repeat-y;
               background-position: 84px;
        }
    </style>
</head>
<body>
   <div id="tree" ><img src="Tree1.jpg" /></div>
 
</body>
</html>

**Haoru** · 23/02/2011, 02h27

Merci.

J'ai r�ussi en utilisant ta technique et en changeant un peu mon image, car c'�tait des images � fond transparent et elles n'�taient pas totalement correspondantes dans l'axe du tronc.

En tout cas bien jou� et merci encore.

modifier feuille de style css via Javascript

JavaScript

Discussions similaires

Partager

Partager