Search code examples
javascripthtmlgreasemonkeytampermonkey

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"

Solution

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