Reemplazar el archivo CSS sobre la marcha (y aplicar el nuevo estilo a la página)
Tengo una página que tiene <link>en el encabezado que carga el CSS llamado light.css. También tengo un archivo llamado dark.css. Quiero un botón para intercambiar el estilo de la página por completo (se utilizan 40 selectores en el archivo css y algunos no coinciden en dos archivos).
¿Cómo puedo eliminar la referencia light.csscon JS y eliminar todos los estilos que se aplicaron y luego cargar dark.cssy aplicar todos los estilos a partir de eso? No puedo simplemente restablecer todos los elementos, ya que algunos de los estilos se aplican a través de diferentes archivos CSS y otros se generan dinámicamente mediante JS. ¿Existe una forma sencilla pero eficaz de hacerlo sin recargar la página? Es preferible Vanilla JS, sin embargo, usaré jQuery para el procesamiento posterior de todos modos, por lo que jQ también está bien.
Puede incluir todas las hojas de estilo en el documento y luego activarlas/desactivarlas según sea necesario.
Según mi lectura de la especificación, deberías poder activar una hoja de estilo alternativa cambiando su disabledpropiedad de verdadero a falso , pero sólo Firefox parece hacerlo correctamente.
Entonces creo que tienes algunas opciones:
Palancarel=alternate
<link rel="stylesheet" href="main.css">
<link rel="stylesheet alternate" href="light.css" id="light" title="Light">
<link rel="stylesheet alternate" href="dark.css" id="dark" title="Dark">
<script>
function enableStylesheet (node) {
node.rel = 'stylesheet';
}
function disableStylesheet (node) {
node.rel = 'alternate stylesheet';
}
</script>
Establecer y alternardisabled
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" id="light" class="alternate">
<link rel="stylesheet" href="dark.css" id="dark" class="alternate">
<script>
function enableStylesheet (node) {
node.disabled = false;
}
function disableStylesheet (node) {
node.disabled = true;
}
document
.querySelectorAll('link[rel=stylesheet].alternate')
.forEach(disableStylesheet);
</script>
Palancamedia=none
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="light.css" media="none" id="light">
<link rel="stylesheet" href="dark.css" media="none" id="dark">
<script>
function enableStylesheet (node) {
node.media = '';
}
function disableStylesheet (node) {
node.media = 'none';
}
</script>
Puede seleccionar un nodo de hoja de estilo con getElementById , querySelector , etc.
(Evite el no estándar <link disabled>. Sin embargo, configurar HTMLLinkElement#disabled está bien).
Puede crear un nuevo enlace y reemplazar el antiguo por el nuevo. Si lo pones en una función, puedes reutilizarlo donde sea necesario.
El Javascript:
function changeCSS(cssFile, cssLinkIndex) {
var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);
var newlink = document.createElement("link");
newlink.setAttribute("rel", "stylesheet");
newlink.setAttribute("type", "text/css");
newlink.setAttribute("href", cssFile);
document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}
El HTML:
<html>
<head>
<title>Changing CSS</title>
<link rel="stylesheet" type="text/css" href="positive.css"/>
</head>
<body>
<a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a>
<a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
</body>
</html>
Para simplificar, utilicé javascript en línea. En producción, querrás utilizar detectores de eventos discretos.
