Changing CSS using Javascript

0

To apply accessibility features to a site (contrast / major font / smaller font), I created alternate .css files with the formatting I wanted, and called those files via javascript. However, especially when the connection is slow, when the function is called, the page stays for 1 second without css and then the formatting is applied. Does this "blink" give a clutter in usability do you know?

But I do not know how to solve it. Any suggestions?

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

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 load 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();
    }
      );
    
asked by anonymous 21.08.2018 / 17:11

0 answers