Problème de récupération CSS en Javascript

Résolu/Fermé
natheon Messages postés 15 Date d'inscription samedi 12 février 2011 Statut Membre Dernière intervention 12 juillet 2012 - 26 juin 2012 à 22:52
natheon Messages postés 15 Date d'inscription samedi 12 février 2011 Statut Membre Dernière intervention 12 juillet 2012 - 27 juin 2012 à 19:55
Bonjour,

Je suis actuellement en train de programmer un site internet et je veux faire une galerie photo. Pour cela j'ai besoin de récupérer des propriété CSS en javascript. Voici mon code :

html :
<script type="text/javascript" src="galerie.js"></script>

<a id="galerienext"><img id="suivant" src="images/suivant.gif"></a>
<a id="galerielast"><img id="precedent" src="images/precedent.gif"></a>

<div class="galerie1">
<div class="cadreinterieur">
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>

<a class="galerietout" id="a1" href="images/img_a_ajouter.jpg" >
<img class="imagegalerie" src="images/img_a_ajouter.jpg" />
</a>
</div>

CSS:


@charset "UTF-8";

div.galerie1 {
position: absolute;
left: 300px;
top: 225px;
width: 656px;
height: 397px;
overflow: hidden;
background-color: #333;
}


#suivant{
width: 25px;
height: 30px;
position: absolute;
top: 182px;
left: 3px;
}
#galerienext {
position: absolute;
width: 31px;
height: 397px;
top: 225px;
left: 956px;
border-radius: 0px 5px 5px 0px;
}
#galerienext:hover {
background-color: #ababab;
}

#precedent {
width: 25px;
height: 30px;
position: absolute;
top: 182px;
left: 3px;
}
#galerielast {
position: absolute;
width: 31px;
height: 397px;
top: 225px;
left: 269px;
border-radius: 5px 0px 0px 5px;
}
#galerielast:hover {
background-color: #ababab;
}



.cadreinterieur {
position: absolute;
left: 4px;
top: 4px;
background-color: #333;

}

div .galerietout {
float: left;
width: 100px;
height: 70px;
padding: 4px;
font-size: 12px;
text-align: center;
}

div .galerietout:hover {
background-color: white;
}

.imagegalerie{
height: 70px;
width: 100px
}

.cachee{
display:none;
}

JS:

var incrSuivPre=0,
next = document.getElementById('galerienext'),
last = document.getElementById('galerielast');
last.style.display = 'none';


/////////////////////

Je cherche juste a enlever le bouton "last" quand nous sommes en première page car il ne sert à rien (sachant que mon code n'est pas finalisé donc pour le moment je n'ai qu'une page mais d'autres viendront s'ajouter par la suite). Le code bloque sur la dernière ligne(j'ai essayé de mettre des alert après, il ne fonctionnent pas alors que avant cette ligne ils fonctionnent.

Quelqu'un pourrait-il donc me dire pourquoi cette propriété ne fonctionne pas ?

PS : j'ai aussi essayé de changer la classe de l'élément (avec l'attirbut className) et je n'ai pas eu plus de succès.
A voir également:

1 réponse

natheon Messages postés 15 Date d'inscription samedi 12 février 2011 Statut Membre Dernière intervention 12 juillet 2012
27 juin 2012 à 19:55
Bon, je répond tout seul à mon post mais le problème venait seulement du fait que j'insérais mon script au mauvais endroit dans la page html (je ne sais pas pourquoi...). Il fallait le placer à la fin.
0