Funcion de alineacion en Javascript - SetAtributos Mal?

[ShadowRock]

Hola mi problema es que tengo 3 botones en los cuales tengo 3 funciones javascript que se "supone" que tiene que borrar el anterior nombre de la clase y agregarle uno nuevo la cosa es que no lo hace. Les paso a mostrar mi codigo Javascript y luego el css.

Código Javascript:

/* --- Alineacion --- */
function Solo(){
    /* --- Novedad --- */
    document.getElementById('Novedad').removeAttribute('class');    
    document.getElementById('Novedad').setAttribute('class','Uno');
    /* --- Detalle --- */
    document.getElementById('Detallado').removeAttribute('class');
    document.getElementById('Detallado').setAttribute('class','DUno');
}
 
function Dos(){
    /* --- Novedad --- */
    document.getElementById('Novedad').removeAttribute('class');    
    document.getElementById('Novedad').setAttribute('class','Dos');
    /* --- Detalle --- */
    document.getElementById('Detallado').removeAttribute('class');
    document.getElementById('Detallado').setAttribute('class','DDos');
}
 
function Tres(){
    /* --- Novedad --- */
    document.getElementById('Novedad').removeAttribute('class');    
    document.getElementById('Novedad').setAttribute('class','Tres');
    /* --- Detalle --- */
    document.getElementById('Detallado').removeAttribute('class');
    document.getElementById('Detallado').setAttribute('class','DTres');
 
}
 

Código CSS:

/* --- Novedades --- */
#Novedades{
    display:table;
    border:1px solid #333;
    border-radius:5px;
    padding:25px;
    height:350px;
    box-shadow:-1px 1px 10px #666;
    margin-top:50px;
    margin-right:50px;
    text-align:center;
}
/* --- 3 Cuadros por linea --- */
.Tres{
    margin-bottom:50px;
    display:inline-block;
    width:250px;
    margin:8px;
}
.Tres img{
    width:200px;
    margin:5px;
}
#DTres{
    display:none;
}
 
/* --- 2 Cuadros por linea --- */
.Dos{
    margin:10px; 
    padding-left:25px; 
    padding-right:25px; 
    margin-bottom:50px; 
    display:inline-block; 
    width:325px;
}
.Dos img{
    width:200px;
    margin:5px;
}
.DDos{
    color:#444;
    margin-top:25px;
    margin-bottom:50px;
}
 
/* --- 1 Cuadro por linea --- */
.Uno{
    margin-bottom:50px;
    display:block;
    width:400px;
    margin:8px; 
    margin-left:175px;
}
.Uno img{
    width:200px; 
    margin:5px;
}
 
.DUno{
    color:#444;
    margin-top:25px;
    margin-bottom:50px;
    display:block;
    text-align:left;
}
 

Y por último lo que serian los cuadros.

Código HTML:

<!-- Novedades -->
<div id="Novedades">
    <div class="Titulares">Novedades Recientes</div>
    <div id="Controladores">
<table>
    <tr>
        <td>
            Alineacion: 
        </td>
        <td>
            Cantidad:
        </td>
        <td>
            Orden:
        </td>
        <td>
            Buscador:
        </td>
    </tr>
    <tr>
        <td>
    <input type="image" src="Imagen/Utileria/Solo.png" onClick="Solo();" />
    <input type="image" src="Imagen/Utileria/Dos.png" onClick="Dos();" />
    <input type="image" src="Imagen/Utileria/Tres.png" onClick="Tres();" />
        </td>
        <td>
    <select onChange="Cantidad();">
        <option selected>Seleccione cantidad</option>
        <option> </option>
        <option value="10"> 10 Últimos </option>
        <option value="10"> 50 Últimos </option>
        <option value="10"> 100 Últimos </option>
        <option value="10"> 150 Últimos </option>
    </select>
        </td>
        <td>
        <select onChange="Cantidad();">
        <option selected>Seleccione Orden</option>
        <option> </option>
        <option value="ASC"> Ascendente </option>
        <option value="DESC"> Descendente </option>
    </select>
        </td>
        <td>
    <input type="search" placeholder="Buscar..." onKeyUp="Buscar(this.value);" />
        </td>
    </tr>
</table>
    </div>
    
    <div class="Novedad">
    La Entre vias en "El dioni bar"<br>
    <img src="a" /><br>
    La entre vias se estara presentando en el dioni bar con intencion de presentar oficialmente el nuevo disco
    titulado "Todo Suma".<br>
   <div id="Detallado">
    Lugar: Dioni bar - Avellaneda.<br>
    Direccion: Beruti 249 entre belgrano y mitre.<br>
    Fecha: Miercoles 2 de mayo.<br>
    Horario: 00:00 Hs.
    </div>
    </div>
 
    <div class="Novedad">
    La Entre vias en "El dioni bar"<br>
    <img src="a" /><br>
    La entre vias se estara presentando en el dioni bar con intencion de presentar oficialmente el nuevo disco
    titulado "Todo Suma".<br>
   
   <div id="Detallado">
    Lugar: Dioni bar - Avellaneda.<br>
    Direccion: Beruti 249 entre belgrano y mitre.<br>
    Fecha: Miercoles 2 de mayo.<br>
    Horario: 00:00 Hs.
    </div>
    </div>
 
    <div class="Novedad">
    La Entre vias en "El dioni bar"<br>
    <img src="a" /><br>
    La entre vias se estara presentando en el dioni bar con intencion de presentar oficialmente el nuevo disco
    titulado "Todo Suma".<br>
    
    <div id="Detallado">
    Lugar: Dioni bar - Avellaneda.<br>
    Direccion: Beruti 249 entre belgrano y mitre.<br>
    Fecha: Miercoles 2 de mayo.<br>
    Horario: 00:00 Hs.
    </div>
    </div>
    
 
</div>
 

[caricatos]

Hola:

No te complique si quieres modificar las clases. Algo que siempre ha funcionado es la sintaxis del punto elemento.className = "Uno"... y removeAtribute no creo que funcione con atributos estándar como class (como si quisieras eliminar el id...

Y para más de una clase puedes poner las que quieras separándolas simplemente con un espacio:

elemento.className = "Uno Dos";

Saludos