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>