document.getElementById always returns "null" for ribbons
<p>I need to set the background color of one of the buttons in the form's ribbon. This isn't supported through Ribbon Workbench, so I have written following javascripts to achieve the same:</p>

<pre><code>function setOpportunityRibbonsAppearance() {
    var submitToForeCastButton = parent.document.getElementById("opportunity|NoRelationship|Form|sfw.opportunity.Button1.Button");

    if (submitToForeCastButton != null) {
        submitToForeCastButton.style.backgroundColor = "lightyellow";
    }
}
</code></pre>

<p>I have registered this scripts in Form Load event. However the issue is that, I always get parent.document.getElementById as null only. 
Surprisingly, I am able to see the control while running the parent.document.getElementById statement in the browser's console, and can also change the styling attributes.</p>

<p>Can anyone please suggest what could be wrong here?</p>

<p>P.S. - I understand document.getElementById is not recommended to use in CRM, however, I am left with no other choice while trying to change the appearance of some of the buttons.</p>

<p>Any help on this, will be much appreciated.</p>