How to change the CSS in this case?

Navigation
0

Good morning everyone! Being objective. I want to change the CSS of two different pages at the same time, with an on / off button in one of them, and that this change is made in all of them, but I have the following difficulties:

The on / off button is inside the iframe , it would have to change itself and the menu:

Butitlookslikethis:

AndIwouldlikeittolooklikethis:

I'musingthisscripttochangetheCSSandkeepitmodifieduntiltheuserpressesthe"high contrast" button again: 

function setActiveStyleSheet(title) {
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) 
{
  a.disabled = true;
  if(a.getAttribute("title") == title) a.disabled = false;
}
}
}

function getActiveStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") 
&& !a.disabled) return a.getAttribute("title");
}
return null;
}

function getPreferredStyleSheet() {
var i, a;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1
   && a.getAttribute("rel").indexOf("alt") == -1
   && a.getAttribute("title")
   ) return a.getAttribute("title");
}
return null;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function(e) {
var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);
}

window.onunload = function(e) {
var title = getActiveStyleSheet();
createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

But it only modifies the Iframe where it was pressed, and not all others, besides, I could not implement the two functions on the same button, after it changed the CSS I can not turn it off, it. I did so: 

<a href="#" onclick="setActiveStyleSheet('alto');return false; 
setActiveStyleSheet('normal');return false" class="bcontraste"><b>ALTO 
</br>CONTRASTE</b></a>

I need to change the CSS of the menu and all the pages by pressing the "high contrast" button and keep them with the modified CSS until the user presses the "high contrast" button again.

I appreciate any light for the solution. Thank you in advance.

    
asked by anonymous 17.11.2017 / 13:47

1 answer

0

What you should do is to create a function in javascript where it changes the class of the page's tags when the button is clicked onclick="function_name()" the basic function to change is as follows: 

     var nome_da_variavel = document.querySelector('#id_ou_classe');
        if (nome_da_variavel.classList.contains('class_sem_auto_contraste')) {
            nome_da_variavel.classList.remove('class_sem_auto_contraste');
        } else {
            nome_da_variavel.classList.add('class_COM_auto_contraste');
        }
    }

Use classes focused on changing the color of the page ...

    
17.11.2017 / 13:58
Automatic input validation Change wordpress quick edit