1

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?

9
  • Você quer ter vários arquivos css que terão classes unicas que definirão todas as classes que usará no site? E qual o problema de fazer exatamente isso? Crie quantos arquivos vc precisar, coloque todas as classes que precisar, e decida qual extensão de css vc precisará por algum evento em jquery. Por exemplo, ter uma classe .primeira_cor div num arquivo, e ter .segunda_cor div em um segundo arquivo, e assim por diante. 3/11/2017 às 16:08
  • Exato. E como chamo com JQuery? 3/11/2017 às 16:13
  • No clique de cada a invoque uma função, que no javascript mudará a class do body, por exemplo. Vou montar uma resposta. 3/11/2017 às 16:15
  • 3
    Possível duplicata de Como faço um botão switch para alternar css? (provavelmente tenhamos outras mais sobre o assunto)
    – Largato
    3/11/2017 às 16:16
  • Isso mesmo, a duplicata responde a pergunta adequadamente. 3/11/2017 às 16:22

1 Resposta 1

0

o exemplo ai:

<!DOCTYPE html>
    <html>
    <head>
        <title>teste</title>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="crossorigin="anonymous"></script>
        <script>
            $(function(){

                $('input[name="input_selecionar"]').click(function(){

                    $('head').append('<link rel="stylesheet" type="text/css" href="'+$(this).attr('id')+'.css">');

                });

            });
        </script>
    </head>
    <body>
        <div class="selecionar">
            <input type="radio" name="input_selecionar" id="1" value="1">
                <label for="1">primeiro</label>
            <input type="radio" name="input_selecionar" id="2" value="2">
                <label for="2">segundo</label>
            <input type="radio" name="input_selecionar" id="3" value="3">
                <label for="3">terceiro</label>
        </div>
    </body>
    </html>

OBS: só tá add mais tags eu fiz apenas para mostrar rapidamente, voce deverá remover os outros desnecessarios

1

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .