web-dev-qa-db-fra.com

Ajouter onclick avec le pseudo-élément css après

Est-il possible dans mon fichier css de faire quelque chose comme ça ?:

.myclass:after{
   content:"click me";
   onclick:"my_function()";
 }

Je souhaite ajouter après toutes les instances de myclass un texte cliquable, dans la feuille de style css.

javascripthtmlcsspseudo-element
27
Oli

Est-il possible dans mon fichier css de faire quelque chose comme [voir le code ci-dessus]?

Non

La question importante à poser est pourquoi.

HTML a le contrôle des données de la page Web. Tout CSS ou JS est spécifié via le HTML. C'est le Modèle.

CSS contrôle le styles, il n'y a pas de lien entre CSS et HTML ou JavaScript. C'est le View.

JavaScript a le contrôle des interactions au sein de la page Web et est relié à tous les nœuds DOM. C'est le contrôleur.

En raison de cette structure MVC: HTML appartient aux fichiers .html, CSS à des fichiers .css et JS à des fichiers .js.

Les pseudo-éléments CSS ne créent pas de nœuds DOM. Il n’existe aucun moyen direct pour JavaScript d’accéder à un pseudo-élément défini en CSS, et il n’existe aucun moyen de lier un événement à ces pseudo-éléments.

Si vous disposez d'une structure définie et que vous ne pouvez pas ajouter le contenu supplémentaire nécessaire pour générer de nouveaux liens dans le code HTML, JavaScript peut ajouter dynamiquement les nouveaux éléments nécessaires, qui peuvent ensuite être stylés via CSS.

jQuery rend cela très simple:

$('<span class="click-me">click me</span>').appendTo('.myclass').click(my_function);
44
zzzzBov

Bien,

si vous utilisez expression , cela pourrait être possible uniquement avec Internet Explorer.

Autrement:

Non, pas du tout, css n'est pas ce que css est fait et destiné.

0
The Surrican