Bonjour !

Je n'arrive pas a trouver comment faire pour acceder en javascript aux elements de la page définis avec les pseudos classes CSS :before et :after.

Dans l'exemple ci dessous, je créé un div avec une pseudo classe :before qui va etre le titre du div.
J'aimerais ajouter un gestionnaire d'evenement *uniquement* au titre du div, mais je ne vois pas le "block" correspondant au :before dans l'inspecteur DOM.

Est-ce réellement possible ?

(ps : C'est du code compatible FF3, si ca ne fonctionne pas sous IE c'est pas grave ;o)

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
<html>
<head>
	<style>
		.cadre {
			width:200px;
			margin:auto;
			border:1px solid;
		}
		.cadre:before {
			display:block;
			content:attr(titre);
			background-color:lightblue;
		}
	</style>
</head>
<body>
	<div id="testDiv" class="cadre" titre="Titre">
		Contenu
	</div>
 
<script>
	function test(e) {
		alert('test');
	}
 
	var aDiv=document.getElementById("testDiv");
	// definition d'un gestionnaire d'evenement sur le div : ok
	aDiv.onclick=test;
	// modification du style du div : ok
	aDiv.style.fontWeight='bold';
	// definition d'un gestionnaire d'evenement uniquement sur le titre du div ?
	//aDiv.???.onclick=...;
</script>
 
</body>
</html>