Changing CSS through Javascript

Asked

Viewed 52 times

0

To apply accessibility features to a website (contrast/larger source/smaller source), I created files. alternative css with the desired formatting and called these files through a javascript. However, especially when the connection is slow, when the function is called, the page is for 1 second without css and then the formatting is applied. This "wink" gives a muddle in usability you know?

But I don’t know how to fix it. Any suggestions?

This is the function that changes the css according to the clicked button:

function fontegrande()
{   
var css = document.querySelector('#css');


document.cookie = "fonte=grande";
    var fonte = Cookies.get("fonte");
    var contraste = Cookies.get("contraste");
    if(fonte=="grande"){
        css.setAttribute('href', '/Content/cssaumento.css');
    }
    if (contraste=="contrasteativo") 
    {
        css.setAttribute('href', '/Content/cssaumentocontraste.css');
    }

}

function fontepequena ()
{       
var css = document.querySelector('#css');
var contraste = Cookies.get("contraste");
    //Cookies.set("fonte","pequena", { expires: 365 });
document.cookie = "fonte=pequena";
var fonte = Cookies.get("fonte");
    if(fonte=="pequena"){
        css.setAttribute('href', '/Content/cssmenor.css');
    }
    if (contraste=="contrasteativo") 
    {
        css.setAttribute('href', '/Content/cssmenorcontraste.css');
    }
}

function fontenormal ()
{   
    var css = document.querySelector('#css');
    var contraste = Cookies.get("contraste");
    document.cookie = "fonte=normal";
    var fonte = Cookies.get("fonte");
    if(fonte=="normal"){
        css.setAttribute('href', '/Content/Application.css');
    }
    if (contraste=="contrasteativo")
    {
        css.setAttribute('href', '/Content/csscontraste.css')
    }

}

function contraste ()
{
    var css = document.querySelector('#css');
    var contraste = Cookies.get("contraste");

    var fonte = Cookies.get("fonte");

    if (contraste != "contrasteativo")
    {
        document.cookie = "contraste=contrasteativo";
        css.setAttribute('href', '/Content/csscontraste.css');
        if (fonte=="pequena")
        {
            css.setAttribute('href', '/Content/cssmenorcontraste.css');
        }
        if (fonte=="grande")
        {
            css.setAttribute('href', '/Content/cssaumentocontraste.css');
        }
        if (fonte=="normal")
        {
            css.setAttribute('href', '/Content/csscontraste.css');
        }
    }

else
    if (contraste != "contrasteinativo")
    {
        css.setAttribute('href', '/Content/Application.css');
        document.cookie = "contraste=contrasteinativo";
        if (fonte == "pequena")
        {
            css.setAttribute('href', '/Content/cssmenor.css');
        }
        if (fonte=="grande")
        {
            css.setAttribute('href', '/Content/cssaumento.css');
        }
        if (fonte=="normal")
        {
            css.setAttribute('href', '/Content/Application.css');       
        }
    }   

}

This is the function called on page loading to check which css is active:

function checafontegrande()
{   
    var css = document.querySelector('#css');
    var fonte = Cookies.get("fonte");
    var contraste = Cookies.get("contraste");
    if(fonte=="grande"){
        css.setAttribute('href', '/Content/cssaumento.css');
    }
    if (contraste=="contrasteativo") 
    {
        css.setAttribute('href', '/Content/cssaumentocontraste.css');
    }

}

function checafontepequena ()
{       
var css = document.querySelector('#css');
var contraste = Cookies.get("contraste");
var fonte = Cookies.get("fonte");
    if(fonte=="pequena"){
        css.setAttribute('href', '/Content/cssmenor.css');
    }
    if (contraste=="contrasteativo") 
    {
        css.setAttribute('href', '/Content/cssmenorcontraste.css');
    }
}

function checafontenormal ()
{   
    var css = document.querySelector('#css');
    var contraste = Cookies.get("contraste");
    var fonte = Cookies.get("fonte");
    if(fonte=="normal"){
        css.setAttribute('href', '/Content/Application.css');
    }
    if (contraste=="contrasteativo")
    {
        css.setAttribute('href', '/Content/csscontraste.css')
    }

}

function checacontraste ()
{
    var css = document.querySelector('#css');
    var contraste = Cookies.get("contraste");
    var fonte = Cookies.get("fonte");

    if (contraste != "contrasteativo")
    {
        css.setAttribute('href', '/Content/Application.css');
        if (fonte=="pequena")
        {
            css.setAttribute('href', '/Content/cssmenor.css');
        }
        if (fonte=="grande")
        {
            css.setAttribute('href', '/Content/cssaumento.css');
        }
        if (fonte=="normal")
        {
            css.setAttribute('href', '/Content/Application.css');
        }
    }

else
    if (contraste != "contrasteinativo")
    {
        css.setAttribute('href', '/Content/csscontraste.css');   
        if (fonte == "pequena")
        {
            css.setAttribute('href', '/Content/cssmenorcontraste.css');
        }
        if (fonte=="grande")
        {
            css.setAttribute('href', '/Content/cssaumentocontraste.css');
        }
        if (fonte=="normal")
        {
            css.setAttribute('href', '/Content/csscontraste.css');      
        }
    }   

}

I put this check like this: 

    $(document).ready(function()
    {
        checafontegrande();
        checafontepequena();
        checafontenormal();
        checacontraste();
    }
      );
javascript css accessibility

  • Include your code to the question

  • Okay, I inserted Leandro

  • I have a suggestion: when switching CSS, to not display content without CSS, you could do something like that (using jQuery): $('body').addClass('sumir'); - after the CSS swap command, remove the class: $('body').removeClass('sumir'); - this class must be in another CSS file or set at the beginning like this: .sumir { display: none; } - It might help. However, instead of showing content without CSS the page would be blank.

  • @Rodrigotognin, show a loading screen, before uploading the content of the site, ie the user will view only a gif image or a text, until the site is fully loaded.

  • does the following uses $.ajax takes the value of each css, saved in a variable, so when changing you don’t need to search on the server again only takes what is saved, then you write in a <style id="x"></style>

No answers

Browser other questions tagged javascript css accessibility

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