0

Bom dia a todos! Sendo bem objetivo. Quero mudar o CSS de duas páginas distintas ao mesmo tempo, com um botão on/off em uma delas, e que essa alteração seja feita em todas elas, porém tenho as seguintes dificuldades:

O botão on/off fica dentro do iframe, ele teria que mudar a si mesmo e ao menu:

inserir a descrição da imagem aqui

Mas está assim:

inserir a descrição da imagem aqui

E gostaria que ficasse assim:

inserir a descrição da imagem aqui

Estou usando esse script para mudar o CSS e mantê-lo modificado até o usuário apertar novamente o botão "alto contraste":

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);

Mas ele só modifica o Iframe em que foi pressionado, e não todos os outros, além de quê, não consegui implementar as duas funções no mesmo botão, após ele mudar o CSS não consigo desligá-lo. Fiz assim:

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

Preciso mudar o CSS do menu e de todas as páginas ao pressionar o botão "alto contraste" e manter elas com o CSS modificado até que o usuário pressione novamente o botão "alto contraste.

Agradeço qualquer luz para a solução. Grato desde já.

1 Resposta 1

0

O que você deve fazer é criar uma função em javascript onde ele mude a classe das tags da página quando o botão for clicado onclick="function_name()" a função básica para alterar é a seguinte:

     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');
        }
    }

Utilize classes focadas em mudar a cor da página...

2
  • Entendi, mas ainda assim mudaria somente o iframe certo? O problemas é: Se eu colocar o botão na página principal, tem como eu modificar as tags do iframe?
    – dib
    17/11/2017 às 13:01
  • Se as classes referentes as cores dos iframes forem as mesmas (e no mesmo stylesheet) que a página da página principal ele irá mudar tudo. O que o código faz é mudar TODAS as tags que tenham a classe="nome_sem_contraste" e mudar para "classe_COM_contraste" Se você por todos as tags com essa classe, você mudará todas elas para a cor da classe "classe_com_contraste". Use uma function para chamar outras functions e use as classes para definir as cores 17/11/2017 às 13:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .