How to change a class CSS with a Greasemonkey/Tampermonkey script?

javascript css greasemonkey userscripts tampermonkey

60,871

Solution 1

For this, just use the CSS cascade. Add a style sheet to the page with GM_addStyle().
Note:

We use the !important flag to cover certain potential conflicts.
Use @run-at document-start ^{_{(or use Stylus, see below)}} to minimize "flicker" associated with changing styles after the initial render.

A complete 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;
    }
` );

Note that if you are using Greasemonkey 4, it has busted GM_addStyle() ^{(and a great many other things)}.
It is strongly recommended that you switch to Tampermonkey or Violentmonkey.
In fact, Greasemonkey's controlling developer says as much himself.

In the mean time, here's a shim for those masochists that persist with GM4:

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);
}

Also, for pure CSS manipulation, the ~~Stylish~~ Stylus extension is a better choice than Greasemonkey/Tampermonkey.

Solution 2

What about something like this ?

document.getElementsByClassName("banner_url")[0] .style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')";

But I must admit I'm not sure to understand the question

60,871

Author by

Xeo

Updated on July 08, 2022

Comments

Xeo almost 2 years

I'm trying to set the background image of the body, but only where it uses the class banner_url. The HTML is as follows:

<body id="app_body" class="banner_url desktopapp" data-backdrop-limit="1">

Basically, I would like to force the page to use the following CSS instead:

.banner_url {
    background: url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I am trying to do this using Greasemonkey if it makes any difference. Does anyone know how I can go about this? I started with the following, however haven't had much luck:

function randomBG(){
    document.getElementsByClassName("banner_url").style.backgroundImage="url('http://www.pxleyes.com/images/contests/kiwis/fullsize/sourceimage.jpg')no-repeat center center fixed;";
} 
randomBG();