How to change the CSS in this case?

Question

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

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

But it’s like this:

And I’d like it to stay that way:

I am using this script to change the CSS and keep it modified until the user presses the "high contrast":

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 which, I could not implement the two functions on the same button, after it changes the CSS I can’t turn it off. 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 pages by pressing the "high contrast" button and keep them with modified CSS until the user presses the "high contrast" button again.

I appreciate any light for the solution. Thank you from now on.

Answer 1

What you should do is create a javascript function where it changes the class of page 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 page color...