Wie überschreibe ich Klassen-CSS mithilfe von Greasemonkey- oder Tampermonkey-Skripten?

So ändern Sie Klassen-CSS mit Greasemonkey- oder Tampermonkey-Skript

Sie versuchen, das Hintergrundbild des Body-Elements gezielt zu ändern, wenn es aktiviert ist hat die Klasse „banner_url“. Während Ihr ursprünglicher Ansatz mit getElementByClassName nicht erfolgreich war, gibt es eine einfache Lösung mit Greasemonkey- oder Tampermonkey-Skripten.

Verwendung von CSS Cascade und GM_addStyle

Um das gewünschte Ergebnis zu erzielen, Verwenden Sie die CSS-Kaskade und die Funktion GM_addStyle(), um eine benutzerdefinierte CSS-Regel in die Seite einzufügen. Durch die Verwendung des Flags !important können Sie potenzielle Konflikte außer Kraft setzen. Darüber hinaus minimiert die Verwendung von @run-at document-start (oder der Stylus-Erweiterung) das visuelle Flimmern, das mit Stiländerungen nach dem Rendern verbunden ist.

Complete Script

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

Hinweis: Wenn Sie Greasemonkey 4 verwenden, ist seine GM_addStyle()-Funktionalität unzuverlässig. Erwägen Sie den Wechsel zu Tampermonkey oder Violentmonkey, um die Zuverlässigkeit zu erhöhen. Für diejenigen, die auf der Verwendung von GM4 bestehen, wird ein Kompatibilitäts-Shim bereitgestellt.

Reine CSS-Manipulation

Für eine reine CSS-Manipulation sollten Sie die Verwendung der Stylus-Erweiterung in Betracht ziehen. Es bietet mehr Flexibilität und eine dedizierte Schnittstelle für die CSS-Verwaltung und ist daher in diesem Zusammenhang eine geeignetere Option als Greasemonkey oder Tampermonkey.

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