Comment remplacer le CSS de classe à l'aide de scripts Greasemonkey ou Tampermonkey ?

Comment modifier le CSS de classe à l'aide de Greasemonkey ou du script Tampermonkey

Vous essayez de modifier l'image d'arrière-plan de l'élément body spécifiquement lorsqu'il a la classe "banner_url". Bien que votre approche initiale avec getElementByClassName n'ait pas abouti, il existe une solution simple utilisant les scripts Greasemonkey ou Tampermonkey.

Utilisation de CSS Cascade et GM_addStyle

Pour obtenir le résultat souhaité, utilisez la cascade CSS et la fonction GM_addStyle() pour injecter une règle CSS personnalisée dans la page. En utilisant l'indicateur !important, vous pouvez ignorer tout conflit potentiel. De plus, l'utilisation de @run-at document-start (ou de l'extension Stylus) minimise le scintillement visuel associé aux changements de style après le rendu.

Script complet

// ==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;
    }
` );

Remarque : Si vous utilisez Greasemonkey 4, sa fonctionnalité GM_addStyle() n'est pas fiable. Pensez à passer à Tampermonkey ou Violentmonkey pour une fiabilité accrue. Une cale de compatibilité est fournie pour ceux qui insistent pour utiliser GM4.

Manipulation CSS pure

Pour une manipulation CSS pure, pensez à utiliser l'extension Stylus. Il offre une plus grande flexibilité et une interface dédiée à la gestion CSS, ce qui en fait une option plus adaptée que Greasemonkey ou Tampermonkey dans ce contexte.

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!