Maison  >  Article  >  interface Web  >  Comment modifier dynamiquement la largeur d'un pseudo-élément :before à l'aide de jQuery ?

Comment modifier dynamiquement la largeur d'un pseudo-élément :before à l'aide de jQuery ?

Susan Sarandon
Susan Sarandonoriginal
2024-11-10 11:46:02853parcourir

How to Dynamically Alter the Width of a :before Pseudo-Element using jQuery?

Modification de la largeur des sélecteurs :before CSS à l'aide de JQuery

Afin de définir dynamiquement la largeur du pseudo-élément :before, vous pouvez ajouter un nouvel élément de style dans l'en-tête du document.

JQuery Code :

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

Explication :

  • $('head') sélectionne le du document HTML.
  • .append() ajoute le nouvel élément de style à l'élément élément.
  • À l'intérieur de l'élément de style, nous définissons la propriété width du sélecteur .column:before à 800 pixels, remplaçant la largeur d'origine.

Remarque :

  • La déclaration !important est utilisée pour garantir que la nouvelle largeur remplace toute valeur précédemment définie. styles.
  • Il est à noter qu'il n'existe pas de méthodes jQuery directes pour modifier les règles d'une pseudo-classe. La solution fournie consiste à modifier la feuille de style CSS.

Cette technique permet de modifier dynamiquement la largeur des éléments avec le pseudo-élément :before, tout en laissant les éléments sans celui-ci inchangés.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn