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)
