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