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!