Comment écraser une classe CSS avec Greasemonkey/Tampermonkey ?

Comment écraser une classe CSS avec Greasemonkey/Tampermonkey

Dans ce scénario, le but est de modifier l'image de fond de l'élément body , en particulier lorsqu'il contient la classe "banner_url", à l'aide de scripts Greasemonkey ou Tampermonkey. Voici comment y parvenir :

Utiliser la cascade CSS

Au lieu de modifier directement le style de l'élément, vous pouvez utiliser la cascade CSS pour écraser les règles CSS existantes. Pour ce faire, ajoutez une feuille de style à la page en utilisant GM_addStyle().

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

Dans ce script, les métadonnées "document-start" ont été ajoutées pour minimiser le "scintillement" qui peut se produire si le le style est modifié après le rendu initial.

Approche alternative avec Greasemonkey 4

Si vous utilisez Greasemonkey 4, qui a supprimé GM_addStyle(), vous pouvez utiliser la cale suivante pour surmonter ce problème :

function GM_addStyle (cssStr) {
    var D = document;
    var newNode = D.createElement('style');
    newNode.textContent = cssStr;

    var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
    targ.appendChild(newNode);
}

Manipulation CSS pure avec stylet

Outre Greasemonkey et Tampermonkey, vous pouvez également envisager d'utiliser l'extension Stylus, qui offre de meilleures options pour une manipulation CSS pure. Cela vous permet de modifier directement les règles CSS, ce qui en fait un choix plus approprié pour cette tâche spécifique.

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!