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

Overriding CSS Styles with Greasemonkey/Tampermonkey

In web development, altering the appearance of specific elements on a page can be achieved through CSS (Cascading Style Sheets). If you need to modify the background image of an HTML element only under certain conditions, such as when it belongs to a specific CSS class, you can achieve this using Greasemonkey or Tampermonkey scripts.

Greasemonkey and Tampermonkey

Greasemonkey and Tampermonkey are browser extensions that allow users to execute scripts that modify the content and behavior of web pages. They provide various features for enhancing online experiences, including the ability to modify CSS styles.

Modifying CSS with GM_addStyle()

To modify the CSS of a page using a Greasemonkey or Tampermonkey script, you can use the GM_addStyle() function. This function adds a new style sheet to the page, which can contain custom CSS rules that override the existing styles.

Example Script

To override the CSS of the "banner_url" class and set its background image to a specific URL, you can use the following Greasemonkey or Tampermonkey script:

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

Important Notes

• Use the !important flag in your CSS rules to ensure they override any conflicting styles.
• For optimal performance, use @run-at document-start to minimize the "flicker" effect caused by changing styles after the initial page render.
• If you are using Greasemonkey 4, consider switching to Tampermonkey or Violentmonkey as GM4 has discontinued support for the essential GM_addStyle() function.

Alternative Solution: Stylus

For more advanced CSS manipulation, consider using the Stylus extension. Stylus provides a powerful user interface and a wide range of features for managing CSS styles on web pages.

The above is the detailed content of How can I override CSS styles on specific elements using Greasemonkey/Tampermonkey?. For more information, please follow other related articles on the PHP Chinese website!