Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Barbara Streisand
Freigeben: 2024-11-03 10:47:29
Original
989 Leute haben es durchsucht

How to Overwrite a Class CSS with 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;
    }
`);
Nach dem Login kopieren

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

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!

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