1

Tenho uma página em HTML e com o CSS externo. Fiz uma versão em alto contraste, que o quando o usuário clica no botão, todo o estilo da página muda.

Para fazer isso, eu criei uma âncora (<a>), que chama outro .html - que é totalmente igual ao principal, só muda a referencia do arquivo .css.

HTML principal:

<head>
  <title>Titulo</title>

  <link rel="stylesheet" href="index.css">
</head>

<body>
  <a href="indexAltoCont.html">
    <nav>
      <div class="btnNav">
        Ligar Alto-contraste
      </div>
    </nav>
  </a>
</body>

HTML em Alto Contraste:

<head>
  <title>Titulo</title>

  <link rel="stylesheet" href="indexAltoCont.css">
</head>

<body>
  <a href="index.html">
    <nav>
      <div class="btnNav">
        Desligar Alto-contraste
      </div>
    </nav>
  </a>
</body>

O que eu gostaria de saber é: como que eu faço para alterar somente a referência do .css que fica no head?

2 Respostas 2

3

O que eu gostaria de saber é:
como que eu faço para alterar somente a referência do .css que fica no head?

É possível usando o método Document.querySelector(), que retorna o primeiro elemento dentro do documento que corresponde ao grupo especificado de seletores, encontrar o primeiro elemento <link> cujo o atributo href seja igual index.css usando um seletor de atributo.

document.querySelector("link[href='index.css']").href = "indexAltoCont.css";

Veja o exemplo:

const btn = document.getElementById("contraste");
const lnk = document.querySelector("link[href='style.css']");
const stlcss = new URL("./style.css", window.location)

btn.addEventListener("click", function () {
  if (lnk.href == stlcss.href){
    lnk.href = "styledark.css"; 
  } else {
    lnk.href = "style.css";
  }
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>repl.it</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <button id="contraste"></button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nulla, suscipit sed laoreet ut, commodo ut nibh. Donec ultricies, lectus id auctor sodales, urna mi lacinia tellus, eu pellentesque dui mi vel ex. Nam vehicula semper eros, et aliquet
    nulla tristique sed. Mauris mollis porttitor nibh eu aliquet. Nunc blandit sit amet eros vitae tristique. Fusce laoreet fermentum purus, vitae pulvinar dui mollis ut. Donec vulputate tellus non tincidunt iaculis. Cras commodo, ante sit amet ornare
    faucibus, erat ipsum volutpat dui, quis congue ipsum erat vitae nibh. Praesent ultrices mi sit amet augue aliquet efficitur. Integer eu nunc tincidunt, varius nunc ut, ornare ex. Nunc nec blandit libero, nec suscipit nibh. Phasellus efficitur ante
    a turpis egestas maximus. Sed vel nulla dapibus, sagittis nibh vel, tristique sapien. Sed id felis et erat scelerisque maximus. Aenean ut viverra ante.
  </p>
  <script src="script.js"></script>
</body>

</html>

Teste o código acima no Repl.it. Obs: por ter que manipular dois arquivos css não pode ser executado no Stack Snippets.

Bonus:

Com o auxilio de variáveis CSS pode-se obter o mesmo resultado utilizando apenas um único arquivo de CSS.

const btn = document.getElementById("contraste");

btn.addEventListener("click", function() {
  if (document.body.classList.contains("light")) {
    document.body.classList.remove("light");
    document.body.classList.add("dark");
  } else {
    document.body.classList.remove("dark");
    document.body.classList.add("light");
  }
});
.light {
  --bodybkg: white;
  --btntxt: "Ligar Alto-contraste";
  --btnfg: white;
  --btnbkg: blue;
  --pcolor: black;
}

.dark {
  --bodybkg: black;
  --btntxt: "Desligar Alto-contraste";
  --btnfg: white;
  --btnbkg: red;
  --pcolor: white;
}

#contraste {
  background-color: var(--btnbkg);
  color: var(--btnfg);
}

#contraste:after {
  content: var(--btntxt);
}

p {
  color: var(--pcolor);
}

body {
  background-color: var(--bodybkg);
}
<head>
  <title>Alto-contraste</title>
</head>

<body class="light">
  <button id="contraste"></button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque nulla, suscipit sed laoreet ut, commodo ut nibh. Donec ultricies, lectus id auctor sodales, urna mi lacinia tellus, eu pellentesque dui mi vel ex. Nam vehicula semper eros, et aliquet
    nulla tristique sed. Mauris mollis porttitor nibh eu aliquet. Nunc blandit sit amet eros vitae tristique. Fusce laoreet fermentum purus, vitae pulvinar dui mollis ut. Donec vulputate tellus non tincidunt iaculis. Cras commodo, ante sit amet ornare
    faucibus, erat ipsum volutpat dui, quis congue ipsum erat vitae nibh. Praesent ultrices mi sit amet augue aliquet efficitur. Integer eu nunc tincidunt, varius nunc ut, ornare ex. Nunc nec blandit libero, nec suscipit nibh. Phasellus efficitur ante
    a turpis egestas maximus. Sed vel nulla dapibus, sagittis nibh vel, tristique sapien. Sed id felis et erat scelerisque maximus. Aenean ut viverra ante.</p>
</body>

1

Acredito que seja melhor a utilização de script para a mudança. Veja só:

Com o armazenamento de informação em variável você consegue adicionar e remover classes e com isso, alterar o css da mesma estrutura sem muita dificuldade.

Vou te mostrar aqui como fazer com o jquery mas fique a vontade para se aventurar em Js puro caso tenha preferência:

  • Coloque um jquery em seu html. Pode ser lá no head mesmo. Pesquise e pegue um link de CDN que é sucesso!

  • Crie dois inputs do tipo RADIO e coloque os 'value' com o nome do tema que deseja. Por exemplo: "contraste" e "padrao".

  • Abra um tag lá no fim do seu body e com Jquery ficaria mais ou menos assim:

    // inicio da função
    
    $(function() {
    
    // #temas seria o id do form, div, ou onde vc quiser colocar os imputs
    // eu aconselho criar uma tag DETAILS para que fique bem legal e ao clicar vc
    // vai iniciar o processo
    
      $('#temas').on('click', function() {
    
    // Aqui estamos pegando o botão que foi selecionado, no caso o RADIO que for // escolhe ficará armazenado na variável 'value'
    
      var value = $("[name=radio]:checked").val();
    
    // aqui estou armazenando um botão simples de tag BUTTON na variável //'btnSave'. fique a vontade para modificar como será salvo a opção de //mudança.
    
      var btnSave = $("button");
    
    // Então quando o botão que estava na 'btnSave' for clicado....
    
    btnSave.click(function() {
    
    // se o botão radio escolhido for o do contraste:
    
    if (value == "contraste") {
    
    //aqui é edição de css através do jquery. Caso tenha interesse dá pra você //adicionar classe no tema com o ".addClass" (se quiser eu te ensino assim tbm)
    
    $('AQUI VOCẼ VAI INSERIR AS TAGS, CLASSES E IDS QUE DESEJA MODIFICAR SEMPRE UTILIZANDO VIRGULA PARA SEPARA-LAS COMO POR EXEMPLO: body, .minhaclasse, #meuid. E SEMPRE com ASPAS SIMPLES. Beleza?' ).css({
    'background': '#000'
    })
    
    $('Aqui outra coisa que seja estilizar').css({
    'background': '#999'
    })
    
    $('Aqui outra').css({
    'background': '#000'
    })
    
    $('e outra...').css({
    'color': '#000'
    })
    
    $('e outra, etc...').css({
    'background': '#000'
    });
    }
    
    //IMPORTANTE. Caso a estilização seja simples, vc pode colocar tudo no mesmo //esquema e por exemplo, estilizar com a mesma cor.
    //Aqui condicionamos a escolha para o valor padrão. no caso o tema original
    
    if (value == "padrao") {
    
    // aqui o mesmo esquema do primeiro. Inclusive poderíamos também utilizar o
    // .removeClass para diminuir as linhas de código
    
    $('Aqui outra coisa que seja estilizar').css({
    'background': '#2045a6'
    })
    
    $('Aqui outra coisa que seja estilizar').css({
    'background': '#999'
    })
    
    $('Aqui outra coisa que seja estilizar').css({
    'background': '#2045a6'
    })
    
    $('Aqui outra coisa que seja estilizar').css({
    'color': '#2045a6'
    });
    }
    
    });
    });

Note que o css no jquery tem um padrão diferente.

6
  • 2
    Dei uma formatada no código, mas é bom revisar a indentação. O trecho de código foi delimitado com ``` - três backticks ("acento grave") - Sobre o conteúdo, recomendar uma lib inflada como jQuery para uma coisa simples dessas acaba desvalorizando a resposta (vira um mau exemplo que será replicado talvez por quem perguntou e futuros visitantes), mas se puder por um exemplo com JS puro valoriza muito a postagem. Lembre-se que a qualquer momento pode editar e aprimorar, faz parte da filosofia do site.
    – Bacco
    3/09/2021 às 15:39
  • Olá Bacco. Me desculpe, também sou novo aqui. Minha resposta pro amigo está incorreta? Não entendi o que quis dizer com backlinks.... 3/09/2021 às 15:42
  • Para o trecho de código ficar destacado corretamente, você insere ``` no começo e no fim, veja aqui no histórico o que eu mudei: pt.stackoverflow.com/posts/526605/revisions (selecione o modo markdown lado a lado para uma melhor comparação)
    – Bacco
    3/09/2021 às 15:43
  • Ah sim, perfeito. Obrigado pelo feedback. Sobre a questão ali de cima, em fazer em Js puro. Pensei em passar o Jquery por ser mais amigável ao processo e o estudo que o amigo citou na pergunta. Caso ele queira, posso sim criar esse processo em JS. Fica a escolha do amigo. Mas muito obrigado mais uma vez pelos feedbacks. 3/09/2021 às 15:45
  • 1
    Aqui tem um guia mais completo sobre formatação: pt.stackoverflow.com/editing-help (eu acho meio confuso, mas pode ajudar) - E sobre votos up ou down, não se preocupe, é só organização de conteudo, não é como "like" ou "dislike" de redes sociais. Eventuais negativos não significam repreensão ou falta de simpatia por quem postou, e sim costuma ser indicativo de que cabe alguma melhoria. O fato de você querer contribuir é o que mais importa, aí com o tempo pega o jeito.
    – Bacco
    3/09/2021 às 15:46

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 .