Comment puis-je remplacer les styles CSS sur des éléments spécifiques à l'aide de Greasemonkey/Tampermonkey ?

Remplacer les styles CSS avec Greasemonkey/Tampermonkey

Dans le développement Web, la modification de l'apparence d'éléments spécifiques sur une page peut être réalisée via CSS ( Feuilles de style en cascade). Si vous devez modifier l'image d'arrière-plan d'un élément HTML uniquement sous certaines conditions, par exemple lorsqu'il appartient à une classe CSS spécifique, vous pouvez y parvenir à l'aide des scripts Greasemonkey ou Tampermonkey.

Greasemonkey et Tampermonkey

Greasemonkey et Tampermonkey sont des extensions de navigateur qui permettent aux utilisateurs d'exécuter des scripts qui modifient le contenu et le comportement des pages Web. Ils offrent diverses fonctionnalités pour améliorer les expériences en ligne, notamment la possibilité de modifier les styles CSS.

Modifier le CSS avec GM_addStyle()

Pour modifier le CSS d'une page à l'aide d'un Greasemonkey ou Tampermonkey, vous pouvez utiliser la fonction GM_addStyle(). Cette fonction ajoute une nouvelle feuille de style à la page, qui peut contenir des règles CSS personnalisées qui remplacent les styles existants.

Exemple de script

Pour remplacer le CSS du " "banner_url" et définissez son image d'arrière-plan sur une URL spécifique, vous pouvez utiliser le script Greasemonkey ou Tampermonkey suivant :

// ==UserScript==
// @name     _Override banner_url styles
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant    GM_addStyle
// @run-at   document-start
// ==/UserScript==

GM_addStyle ( `
    .banner_url {
        background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed !important;
        -webkit-background-size: cover !important;
        -moz-background-size: cover !important;
        -o-background-size: cover !important;
        background-size: cover !important;
    }
` );

Notes importantes

• Utiliser l'indicateur !important dans vos règles CSS pour garantir qu'elles remplacent tous les styles en conflit.
• Pour des performances optimales, utilisez @run-at document-start pour minimiser l'effet de « scintillement » provoqué par le changement de style après le rendu initial de la page. .
• Si vous utilisez Greasemonkey 4, envisagez de passer à Tampermonkey ou Violentmonkey car GM4 a interrompu la prise en charge de la fonction essentielle GM_addStyle().

Solution alternative : stylet

Pour une manipulation CSS plus avancée, pensez à utiliser l'extension Stylus. Stylus fournit une interface utilisateur puissante et un large éventail de fonctionnalités pour gérer les styles CSS sur les pages Web.

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!