How to Change Class CSS with Greasemonkey/Tampermonkey Script?

Change Class CSS with Greasemonkey/Tampermonkey Script

To alter the background image of a specific class, such as "banner_url," you can leverage the CSS cascade by adding a stylesheet to the page using GM_addStyle().

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

By using @run-at document-start, you can minimize visual "flicker" during style changes. Note that for Greasemonkey 4, GM_addStyle() is not functional. It is recommended to switch to Tampermonkey or Violentmonkey. For Greasemonkey 4 users, a shim is provided for GM_addStyle(). Additionally, for pure CSS manipulation, consider using the Stylus extension instead of Greasemonkey/Tampermonkey.

The above is the detailed content of How to Change Class CSS with Greasemonkey/Tampermonkey Script?. For more information, please follow other related articles on the PHP Chinese website!