Manejo de CSS con prototype

Utilizando prototype es posible modificar el estilo css de cualquier elemento del DOM o de un grupo de elementos luego de un evento.

Por ejemplo, si queremos modificar el color de fondo de una caja div cuyo id es caja:

$('caja').setStyle({backgroundColor: '#993344'});

 Si queremos modificar más de un atributo css los separamos por comas:

$('caja').setStyle({backgroundColor: '#993344' , borderWidth:'4px'});

 Para hacer referencia a cualquier estilo css prototype cambia ligeramente el nombre del estilo. Vea el siguiente cuadro:

Declaración en CSS                       Declaración en Prototype

background-color: #996655;               backgroundColor: '#996655'
border-color: red;                               borderColor: 'red'
text-align: center;                              textAlign: 'center'
width: 150px;                                    width: '150px'
border-bottom-color: blue;                   borderBottomColor: 'blue'


Observe que la declaración de valores es igual que en CSS, solo que debe ir entre comillas. El nombre del estilo cambia solo cuando en CSS interviene el guión medio, en este caso prototype elimina el guión medio y pone en mayúsculas la primer letra de la palabra que le sigue al guión.