CSS et JavaScript comment y accèder ?
Bonjour,
je viens de lire un tutoriel html5, un tutoriel css3 et un tutoriel javascript :mouarf:
Cependant je n'ai pas encore assez de recul.... mon objectif est de faire une page pour commencer avec une sorte de menu circulaire en bas de la page. Le menu devrait s'articuler de la manière suivante:
boutonflecheG - bouton1 - bouton2 - bouton3 - boutonflecheD
-------------- --------- --------- --------- -------------
- <== - - pg1 - - pg2 - - pg3 - - ==> -
-------------- ---------- --------- --------- -------------
avec toujours un nombre fixe de bouton affiché (ici c'est 3), sachant qu'il y a un nombre x de bouton ou x > 3.
Un appui sur l'une ou l'autre des flèches permet de décaler les "boutons" vers la gauche ou vers la droite.
En html j'ai déjà défini la hiérarchie, en css j'ai mis un peu de beauté, maintenant j'essaye de faire le gros de mon menu circulaire en JS. Plus j'avance plus je me demande si le choix html5 - css3 - JavaScript est approprié, qu'en pensez vous ?
J'ai un soucis pour accéder aux propriétés css, voici un extrait du code html:
Code:
1
2
3
4
5
6
7
8
| <div id="bar_zone">
<div id="bar_zone_button">
<a id ="lights" nb="1">LIGHTS</a>
<a id ="audio" nb="2">AUDIO</a>
<a id ="target" nb="4">TARGET</a>
<a id ="alert" nb="5">ALERT</a>
<div/>
</div> |
Voici un extrait du code css:
Code:
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
| #bar_zone
{
display: inline-block;
width: 80%;
height: 100px;
position: fixed;
bottom: 1%;
background-color: rgba(102, 109, 206, 0.5);
margin: 10px;
border: 3px grey solid;
border-radius: 10px;
text-align: center;
color: rgb(0,0,255);
}
#bar_zone_button a
{
display: inline-block;
width: 150px;
height: 50px;
background-color: white;
margin: 10px;
border: 3px grey solid;
border-radius: 10px;
vertical-align: middle;
font-size: large;
} |
Voici un extrait du code JS:
Code:
1
2
3
4
5
| var elmt1 = document.getElementById('lights');
elmt1.addEventListener('click', function() {
alert(elmt1.nodeName + ': lights' + elmt1.getAttribute('nb'));
var toto=bar_zone_button.width;
}, false); |
Comment dois-je faire pour obtenir les infos définies dans le css, par ex: width ou height, ... ?
Dans le tuto que je regarde, il est seulement préciser de supprimer les "-" et de mettre une Majuscule au mot suivant, ici le problème ne se pose pas.
Merci pour votre aide,
[EDIT] Et voila la travail:
var tata =window.getComputedStyle(elmt1,'#bar_zone').width;
Pour info la page est chargée uniquement sur Mozilla (pas d'IE ou autres)
