Problème de récupération CSS en Javascript
Résolu
natheon
Messages postés
15
Date d'inscription
Statut
Membre
Dernière intervention
-
natheon Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
natheon Messages postés 15 Date d'inscription Statut Membre Dernière intervention -
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.
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:
- Problème de récupération CSS en Javascript
- Récupération de déchets - Guide
- Convertisseur récupération de texte - Guide
- Telecharger javascript - Télécharger - Langages
- Recuperation video youtube - Guide
- Impossible de récupérer mon compte gmail - Guide