Accessibility - More than one CSS on the site

Asked

Viewed 45 times

1

I’m developing a website 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 changes only 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 It’s a different scheme. I ran a test on idcor1Select, but it’s not working. How do I call each CSS?

jquery css

  • Do you want to have multiple css files that will have single classes that will define all the classes you use on the site? And what’s wrong with doing just that? Create as many files as you need, put in all the classes you need, and decide which css extension you need for any jquery event. For example, having a class .primeira_cor div in an archive, and have .segunda_cor div in a second file, and so on.

  • Exactly. And as I call with Jquery?

  • At the click of each a invoke a function, which in javascript will change the body class, for example. I will assemble a response.

  • 3

    Possible duplicate of How do I switch to switch css? (we probably have more on the subject)

  • That’s right, the duplicate answers the question properly.

  • But it will increment the CSS I select with the original. Or I have to duplicate everything?

  • @Gustavocinque changed the question

  • Voce can make a form with inputs of type radio, and detect the selected input, then just 'listening' the form, and see if there was a change in inputs, if change, change the href of the link of the stylesheet

  • @Does Matheuslopesmarques have an example? I don’t understand.

Show 4 more comments

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>

OBS: only tá add more tags I did just to quickly show, You should remove the other unnecessaries

  • if you have succeeded (or not) tell me that I try to help

Browser other questions tagged jquery css

You are not signed in. Login or sign up in order to post.