Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mudar cor</title>

// Arquivo cor1.css ///////////////////////////////////////////

@charset "iso-8859-1";
/* CSS Document */

body{
    background-color: #062422;
}

.menu{
    background-color: #CCCC00;
}

.conteudo{
    background-color: #FAFAD2;
}

.novidades{
    background-color: #FDFDF6;
}

body, .menu, .conteudo, .novidades{
    color: #000000;
}

// Arquivo cor2.css ///////////////////////////////////////////

@charset "iso-8859-1";
/* CSS Document */

body{
    background-color: #A6E0DD;
}

.menu{
    background-color: #AE841A;
}

.conteudo{
    background-color: #1D2C1D;
}

.novidades{
    background-color: #3B4340;
}

body, .menu, .conteudo, .novidades{
    color: #FFFFFF;
}

// Arquivo cor3.css ///////////////////////////////////////////

@charset "iso-8859-1";
/* CSS Document */

body{
    background-color: #062422;
}

.menu{
    background-color: #CCCC00;
}

.conteudo{
    background-color: #FAFAD2;
}

.novidades{
    background-color: #FDFDF6;
}

body, .menu, .conteudo, .novidades{
    color: #000000;
}

// Arquivo index.html ///////////////////////////////////////////

<link id="estilos" rel="stylesheet" type="text/css" href="">

<script>
    function mudarcor(escolha){
        document.getElementById("estilos").href = "cor" + escolha + ".css";
    }
</script>

</head>

<body>

<div class="menu">1</div>
<div class="conteudo">2</div>
<div class="conteudo">3</div>
<div class="conteudo">4</div>
<div class="novidades">5</div>
<div class="novidades">6</div>
<div class="novidades">7</div>
<div class="novidades">8</div>

<br />

<input type="button" onclick="mudarcor(1)" value="Cor 1" />
<input type="button" onclick="mudarcor(2)" value="Cor 2" />
<input type="button" onclick="mudarcor(3)" value="Cor 3" />

</body>
</html>