Acceder aux blocs d'une pseudo classe CSS ?
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:
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> |
