SharePoint 2010: Why is my new inline style not being rendered through the SharePoint client object model?

My page has a DIV that needs to be hidden based on some runtime logic. I was running my code after the page loaded,

 SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        hideMyStuff($data);
    }, "SP.js");

My function 'hideMyStuff' called another function to handle the hiding logic. My hiding code was simple:

function hideDIV(divId)
{
    document.getElementById(divId).style.display = 'none';
}

That should work, but nothing was happening. On further inspection, I noticed that the CSS class in the page was using a lot of '!important' with its CSS settings, which was overriding my code.

This left 2 options to resolve the problem:

1. Sledgehammer approach: set the value with !important.
The method would become
    document.getElementById(divId).style.display = 'none!important';

2. Stylish approach:  add a new class to the DIV at runtime.
The class is simple:
.hidden {
    display:none;
}

and the hide method (using JQuery) becomes:
 $("#" + divId).addClass('hidden');