Comment modifier dynamiquement la largeur d'un sélecteur :before à l'aide de jQuery ?

Manipulation jQuery des sélecteurs CSS :before

Face aux largeurs d'image dynamiques et à la nécessité de modifier les règles :before en conséquence, accéder à ces pseudo-classes les propriétés via jQuery peuvent être un défi. Cependant, il existe une solution de contournement pour obtenir cette fonctionnalité.

Solution :

Pour cibler et modifier la propriété de largeur du sélecteur :before tout en laissant les autres éléments inchangés, vous pouvez utiliser l'approche suivante :

$('head').append('<style>.column:before{width:800px !important;}</style>');

Ce code ajoute un nouvel élément de style à l'en-tête du document, remplaçant la règle originale :before largeur avec une valeur fixe de 800px. L'indicateur !important garantit que la nouvelle déclaration de style est prioritaire.

Démonstration :

Voir la démo en direct suivante pour un exemple pratique :

[ Démo en direct Lien]

Alternatives :

Bien que l'approche susmentionnée modifie efficacement la propriété width du sélecteur :before, il n'existe pas de méthodes jQuery natives pour accéder directement aux règles de pseudoclasse. Si vous avez besoin d'un contrôle ou d'une flexibilité plus granulaire, envisagez d'utiliser un plugin spécialisé qui résout spécifiquement ce problème.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!