Wie überschreibe ich ein Klassen-CSS mit Greasemonkey/Tampermonkey?

So überschreiben Sie ein Klassen-CSS mit Greasemonkey/Tampermonkey

In diesem Szenario besteht das Ziel darin, das Hintergrundbild des Body-Elements zu ändern , insbesondere wenn es die Klasse „banner_url“ enthält, unter Verwendung von Greasemonkey- oder Tampermonkey-Skripten. So erreichen Sie dies:

CSS-Kaskade verwenden

Anstatt den Stil des Elements direkt zu ändern, können Sie die CSS-Kaskade verwenden, um die vorhandenen CSS-Regeln zu überschreiben. Fügen Sie dazu mit GM_addStyle() ein Stylesheet zur Seite hinzu.

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

In diesem Skript wurden die „Dokumentstart“-Metadaten hinzugefügt, um das „Flackern“ zu minimieren, das auftreten kann, wenn die Der Stil wird nach dem ersten Rendern geändert.

Alternativer Ansatz mit Greasemonkey 4

Wenn Sie Greasemonkey 4 verwenden, das GM_addStyle() entfernt hat, können Sie die folgende Unterlage verwenden Um dieses Problem zu lösen:

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);
}

Reine CSS-Manipulation mit Stylus

Neben Greasemonkey und Tampermonkey können Sie auch die Verwendung der Stylus-Erweiterung in Betracht ziehen, die bessere Optionen bietet für reine CSS-Manipulation. Dadurch können Sie CSS-Regeln direkt ändern, sodass sie für diese spezielle Aufgabe besser geeignet sind.

Das obige ist der detaillierte Inhalt vonWie überschreibe ich ein Klassen-CSS mit Greasemonkey/Tampermonkey?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!