JavaScript - Pilso el link pero no cambia la clase del <div&

Hola,

estoy intentando crear una bandeja de entrada de mensajes para una pequeña red social. Cada uno de los mensajes lleva un link al lado del estilo "Marcar como leido". Tras pulsar sobre el link el fondo del mensaje me gustaría que cambiase de color por ejemplo de gris a blanco.

Estos son los elementos con los que estoy trabajando:

- Una tabla MySQL "Mensaje" con tiene un campo llamado "Estado" (0: mensaje no leido, 1: mensaje leido).

- Dos reglas CSS (div.mensaje_0 y div.mensaje_1) que se diferencian en el color de fondo.

- Este codigo en la vista:

<div class="mensaje_no_leido" id="mensaje_1">

Contenido mensaje

<div class="pie_mensaje">

<?php echo link_to_remote('Marcar como leido', array(

'url' => 'mensaje/cambiarEstadoLeido?id='.$mensaje->getId(),

'update' => 'mensaje_1',

'complete' => 'document.getElementById("mensaje_1").className("mensaje_leido");',


)); ?>

</div>

</div>

"link_to_remote" es un helper para crear links que tras pulsarlos ejecuten una acción del controlador y, a traves de la opción 'complete', ejecutar un accion javascript.

Mi problema: tras pulsar sobre el link, no cambia la clase del <div id="mensaje_1"> a "mensaje_leido".

Os deja también aqui el codigo fuente generado antes de pulsar sobre el link:

<div id="mensaje_1" class="mensaje_no_leido">
Contenido mensaje
<div class="pie_mensaje">
<a onclick="new Ajax.Updater('mensaje_1', '/rs/web/frontend_dev.php/mensaje/cambiarEstadoLeido/id/1', {asynchronous:true, evalScripts:false, onComplete:function(request, json){new Effect.(element, {});}, onLoading:function(request, json){new Effect.(element, {});}});; return false;" href="#">Marcar como leido</a>
<a onclick="mifuncion(); return false;" href="#">¡Pínchame!</a>
</div>
</div>

Un saludo

Javi


Alguna idea?