Wie kann ich CSS-Stile für bestimmte Elemente mit Greasemonkey/Tampermonkey überschreiben?

CSS-Stile mit Greasemonkey/Tampermonkey überschreiben

In der Webentwicklung kann die Änderung des Erscheinungsbilds bestimmter Elemente auf einer Seite durch CSS erreicht werden ( Cascading Style Sheets). Wenn Sie das Hintergrundbild eines HTML-Elements nur unter bestimmten Bedingungen ändern müssen, beispielsweise wenn es zu einer bestimmten CSS-Klasse gehört, können Sie dies mithilfe der Skripte Greasemonkey oder Tampermonkey erreichen.

Greasemonkey und Tampermonkey

Greasemonkey und Tampermonkey sind Browsererweiterungen, die es Benutzern ermöglichen, Skripte auszuführen, die den Inhalt und das Verhalten des Webs ändern Seiten. Sie bieten verschiedene Funktionen zur Verbesserung des Online-Erlebnisses, einschließlich der Möglichkeit, CSS-Stile zu ändern.

CSS mit GM_addStyle() ändern

Um das CSS einer Seite mit a zu ändern Für ein Greasemonkey- oder Tampermonkey-Skript können Sie die Funktion GM_addStyle() verwenden. Diese Funktion fügt der Seite ein neues Stylesheet hinzu, das benutzerdefinierte CSS-Regeln enthalten kann, die die vorhandenen Stile überschreiben.

Beispielskript

Zum Überschreiben des CSS von „ Wenn Sie die Klasse „banner_url“ hinzufügen und ihr Hintergrundbild auf eine bestimmte URL festlegen, können Sie den folgenden Greasemonkey oder Tampermonkey verwenden Skript:

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

Wichtige Hinweise

• Verwenden Sie das Flag !important in Ihren CSS-Regeln, um sicherzustellen, dass alle widersprüchlichen Stile überschrieben werden.
• Für eine optimale Leistung verwenden Sie @run-at document-start, um den „Flimmer“-Effekt zu minimieren, der durch Stiländerungen nach der ersten Seite verursacht wird rendern.
• Wenn Sie Greasemonkey 4 verwenden, sollten Sie einen Wechsel zu Tampermonkey oder Violentmonkey in Betracht ziehen, da GM4 die Unterstützung für die wichtige GM_addStyle()-Funktion eingestellt hat.

Alternative Lösung: Stylus

Für eine erweiterte CSS-Manipulation sollten Sie die Verwendung der Stylus-Erweiterung in Betracht ziehen. Stylus bietet eine leistungsstarke Benutzeroberfläche und eine Vielzahl von Funktionen zum Verwalten von CSS-Stilen auf Webseiten.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Stile für bestimmte Elemente mit Greasemonkey/Tampermonkey überschreiben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!