Comment obtenir « largeur : calc (100 % - 100 px) » avec jQuery pour la compatibilité entre navigateurs ?

Implémentation CSS 'width: calc(100% -100px)' à l'aide de jQuery pour la compatibilité du navigateur

La propriété CSS 'width: calc( 100% -100px)' est un moyen efficace d'obtenir une largeur spécifique qui s'adapte à divers contenus. Cependant, sa compatibilité entre navigateurs peut être limitée, entraînant des problèmes d'affichage dans les navigateurs qui ne prennent pas en charge la fonction 'calc()', comme Safari.

Pour surmonter cette limitation, jQuery peut être utilisé comme un solution alternative. En tirant parti de la capacité de jQuery à manipuler dynamiquement les styles CSS, un effet similaire à « width : calc(100% -100px) » peut être obtenu.

Solution jQuery :

Le code jQuery ci-dessous fournit une alternative viable à la propriété CSS susmentionnée :

$('#yourEl').css('width', '100%').css('width', '-=100px');

Ce code définit efficacement la largeur de l'élément avec l'ID 'yourEl' à 100%, puis en soustrait 100 pixels. La largeur résultante est calculée dynamiquement et appliquée à l'élément, garantissant la réactivité dans différents navigateurs.

Avantages de l'utilisation de jQuery :

• Compatibilité des navigateurs : le large navigateur de jQuery la compatibilité élimine les problèmes d'affichage dans les navigateurs qui ne prennent pas en charge 'calc()'.
• Calculs dynamiques : jQuery gère automatiquement le calcul de la largeur relative, simplifiant ainsi le processus pour les développeurs.

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!