Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Mary-Kate Olsen
Freigeben: 2024-11-03 12:02:03
Original
980 Leute haben es durchsucht

How can I override CSS styles on specific elements using Greasemonkey/Tampermonkey?

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;
    }
` );
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage