foxgenco foxgenco - 2 months ago 12
HTML Question

Change Class value using Greasemonkey?

What method changes a class value using Greasemonkey? For instance, I'd like to change:

<a id="Test" class="button_primary button_left_padding tlignore disabled" role="button"


to:

<a id="Test" class="button_primary button_left_padding tlignore enabled" role="button"

Answer

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