How to Change a Class CSS With a Greasemonkey/Tampermonkey Script

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

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.

Greasemonkey - change HTML classname

Use document.querySelectorAll. This allows you to select DOM elements with specific attributes/classes.

var selected=document.querySelectorAll(".fl.wid470.adm-leftsection");
for(var i = 0, max = selected.length; i < max; i++) {
    all[i].className="fl wid980";
}

Replace line in css file, using Greasemonkey

You are trying to change a background image, not an <img> tag, like that other answer.

For such things, just use CSS overrides.

Here's what it looks like in a Greasemonkey/Tampermonkey script:

// ==UserScript==
// @name        _TeX SE, Swap header background
// @match       *://tex.stackexchange.com/*
// @grant       GM_addStyle
// @run-at      document-start
// ==/UserScript==

GM_addStyle ( `
    #header {
        background: transparent url('https://upload.wikimedia.org/wikipedia/commons/0/09/Dummy_flag.png') no-repeat 50% -25px !important;
    }
` );

Note the !important flag.

Also, @run-at document-start may complicate things if your script does any DOM manipulation.

Anyway, for pure CSS changes, like this one, you are better off using the Stylish extension. It's less fuss and performs better

Change Class value using Greasemonkey?

For a simple static page and assuming that id="Test" is unique and stable, code like the following will work:

var targNode    = document.getElementById ("Test");
targNode.classList.remove ("disabled");
targNode.classList.add ("enabled");

---

---

For AJAX-driven pages, this complete script would work:

// ==UserScript==
// @name     _Flip CSS classes
// @match    http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// ==/UserScript==
//- The @grant directive is needed to restore the proper sandbox.

waitForKeyElements ("#Test", swapClass);

function swapClass (jNode) {
    jNode.removeClass ("disabled").addClass ("enabled");
}

Make a <style> CSS Script into a Greasemonkey Script

Edit:

As Hellion pointed out, this is covered by Greasemonkey with GM_addStyle. From the wiki:

GM_addStyle("body { color: white; } /* CSS etc, etc */");

Greasemonkey is just JS, so you can't directly use CSS in a Greasemonkey script; you need to inject it into the page somehow.

Original Answer:

Demonstrated on http://www.techradar.com/us/news/internet/the-beginner-s-guide-to-greasemonkey-scripting-598247/2, you could add a function to add a stylesheet to the page, then store your CSS in a string:

function addCss(cssString) {
    var head = document.getElementsByTagName('head')[0];
    var newCss = document.createElement('style');
    newCss.type = "text/css";
    newCss.innerHTML = cssString;
    head.appendChild(newCss);
}

And at some point in your script call addCss on your current CSS:

addCss("#mainHeader { position:fixed;} /* more CSS here */");

How to add a CSS style to a specific node using Greasemonkey?

This should do the trick if there is only one occurence of the class bucket__main:

document.querySelector(".bucket__main").style.overflow='hidden';

---

Related Topics