Comment modifier dynamiquement la propriété de largeur CSS de :before Selector à l'aide de jQuery ?

Modification dynamique de la propriété CSS width du sélecteur :before à l'aide de jQuery

Bien qu'il ne soit pas possible de modifier directement la propriété width des sélecteurs CSS :before en utilisant jQuery, une solution de contournement existe. En ajoutant dynamiquement un nouvel élément de style à l'en-tête du document, vous pouvez obtenir l'effet souhaité. Voici comment procéder :

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

Ce code ajoute un nouvel élément de style à l'en-tête du document. Les règles CSS de cet élément ciblent uniquement le sélecteur :before dans la classe .column, définissant la propriété width sur 800px et remplaçant tous les paramètres de largeur existants.

Exemple et démo

Considérez les règles CSS suivantes :

.column:before {
    width: 300px;
    float: left;
    content: "";
    height: 430px;
}

.column {
    width: 500px;
    float: right;
    padding: 5px;
    overflow: hidden;
    text-align: justify;
}

Pour modifier dynamiquement la propriété width de :before pour les éléments de la classe .column, ajoutez le code JavaScript suivant :

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

Cela garantira que seuls les sélecteurs :before dans les éléments .column voient leur largeur modifiée. Une démo en direct de cette solution est disponible [ici](DEMO_URL).

Plugins alternatifs

Bien que la méthode ci-dessus soit une solution simple, vous pouvez également explorer des plugins externes qui fournissent un accès direct aux règles de pseudoclasse. Cependant, il est recommandé de rechercher et de tester ces plugins avant de les utiliser dans un environnement réel.

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!