11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

J'essaie de réaliser un système qui, au clic sur un lien de type ancre
<a href="#monancre">voir</a>
scrolle jusqu'à l'élément
<a name="monancre"></a>
et de surcroît passe le bloc <p> juste au dessous avec un fond de couleur pour le mettre en évidence.
J'ai deux souci :
1. d'abord comment localiser l'élément p ciblé ?
Exemple :

<a name="aabet"></a>
<p>
   <strong>Âabet</strong>
   <em>Géographie &bull; Nom commun.</em>
   Désignation de l'Orient, le lieu où le soleil se lève.
</p>

2. ensuite, comment basculer le style de l'élément, sachant qu'il n'a ni id ni classe, et que si je lui applique l'un des deux, il faudrait que je cible une classe et non pas un id ? La plupart des solutions que j'ai trouvé se base du getElementById qui ne me convient pas (ma page n'est plus valide si je duplique de multiple id...). 
Exemple :
[code]
<script type="text/javascript">		
function colonnes(element, nom_classe) {
	element.setAttribute('class', nom_classe);
	element.setAttribute('className', nom_classe); // IE
}	 
</script>


Je me demande s'il est possible de cibler uniquement les classes sans ID avec javascript...

Merci d'avance si vous avez des pistes.

Amicalement,
Modifié par montoumes (17 Aug 2008 - 11:59)
Une idee est d'utilise un "id" plutot qu un "name".

Ainsi tu peux avoir un javascript qui ferait:

var elt=document.getElementById('lenom');
// attribue la class 'selecionne' a la balise <a>
elt.className='selecionne';


Puis tu aurais une feuille de style avec:

a.selecionne + p
{
 border:1px solid red;
}


Je n'ai pas pu tester ma solution par contre... a voir.
(plus d infos sur les selecteurs ici http://www.w3.org/TR/REC-CSS2/selector.html)
Modifié par tfe (17 Aug 2008 - 13:14)