mootools changing an elements inline css

I have some HTML that looks like this,

<div id="mb_contents" style="visibility: visible; opacity: 1; width: 600px; height: 450px;">

I am trying to turn the visibilty to hidden using this js/mootools,

$('mb_overlay').set('styles', {
            'visibilty': 'hidd开发者_C百科en',
        });

However nothing seems to be working, am I missing something?

You've misspelled "visibility"

This works just fine:

$('mb_contents').set('styles', {
    'visibility': 'hidden'
});

There's a method called setStyle. In your case you'd use it like this:

$('mb_overlay').setStyle('visibility', 'hidden');

I think what you are actually doing with your code is setting an attribute called styles, which doesn't really exist.