Vou desenvolver um site de uma instituição para deficientes visuais. Muitos deles, irão acessar o site, e para cada usuário com problema específico, eu tenho um CSS diferente, que muda apenas as cores d fontes e de alguns elementos.
$('#cor1Select').click(function() {
$('link[href="styles.css"]').attr('href', 'cor2.css');
});
.cor1 {
width: 29px;
height: 29px;
text-align: center;
float: left;
border-radius: 50%;
border: 2px solid #fff;
font: 400 14px/29px 'Montserrat', Tahoma, Arial, Helvetica, sans-serif;
color: #fff!important;
background: rgb(0, 139, 206);
background: -moz-linear-gradient(-45deg, rgba(0, 139, 206, 1) 55%, rgba(255, 255, 255, 1) 55%);
background: -webkit-linear-gradient(-45deg, rgba(0, 139, 206, 1) 55%, rgba(255, 255, 255, 1) 55%);
background: linear-gradient(135deg, rgba(0, 139, 206, 1) 55%, rgba(255, 255, 255, 1) 55%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008bce', endColorstr='#ffffff', GradientType=1);
}
.cor2 {
width: 29px;
height: 29px;
text-align: center;
float: left;
background: #000;
border-radius: 50%;
border: 2px solid #fff;
font: 400 14px/29px 'Montserrat', Tahoma, Arial, Helvetica, sans-serif;
color: #fff!important;
}
.cor3 {
width: 29px;
height: 29px;
text-align: center;
float: left;
background: #000;
border-radius: 50%;
border: 2px solid #fff;
font: 400 14px/29px 'Montserrat', Tahoma, Arial, Helvetica, sans-serif;
color: #f2e40a!important;
}
.cor4 {
width: 29px;
height: 29px;
text-align: center;
float: left;
background: #fff;
border-radius: 50%;
border: 2px solid #fff;
font: 400 14px/29px 'Montserrat', Tahoma, Arial, Helvetica, sans-serif;
color: #000!important;
}
.cor5 {
width: 29px;
height: 29px;
text-align: center;
float: left;
background: #063a91;
border-radius: 50%;
border: 2px solid #fff;
font: 400 14px/29px 'Montserrat', Tahoma, Arial, Helvetica, sans-serif;
color: #fff000!important;
}
<div id="cor1Select" class="cor1" href="/"></div>
<div class="cor2" href="/">A</div>
<div class="cor3" href="/">A</div>
<div class="cor4" href="/">A</div>
<div class="cor5" href="/">A</div>
Cada div é um esquema diferente. Fiz um teste com o idcor1Select, mas não está funcionando. Como eu faço para chamar cada CSS?
.primeira_cor div
num arquivo, e ter.segunda_cor div
em um segundo arquivo, e assim por diante. – Gustavo Cinque 3/11/17 às 16:08a
invoque uma função, que no javascript mudará a class do body, por exemplo. Vou montar uma resposta. – Gustavo Cinque 3/11/17 às 16:15