Accessibility - More than one CSS on the site

Navigation
1

I will develop a site for an institution for the visually impaired. Many of them, will access the site, and for each user with specific problem, I have a different CSS, which only changes the colors d fonts and some elements. 

$('#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>

Each div is a different scheme. I tried the id cor1Select, but it is not working. How do I call each CSS?

    
asked by anonymous 03.11.2017 / 17:02

1 answer

0

the example 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>

04.11.2017 / 01:07
How to read a dataLayer? javaScript error when opening vsCode and Atom