你好吗?我有一个web应用程序，我通过整合和修改其他来源的例子制作了一个暗和亮的主题，我目前可以将当前应用的主题保存在本地存储中，当我在应用程序中切换页面时应用该主题，我遇到的问题是当我在页面之间切换时，如果当前主题是暗的，总是浅色主题首先显示，然后立即应用深色主题。
最初的html文档是这样的
<html>
<body class="tema-claro">
..........
<div class="salir">
button onclick="salir()">Salir</button>
</body
<script src=app.js type="text/javascript></script>
</html>
javascript是下面的
"use strict";
Aplica_Estado_Inicial();
function Cambia_Tema() {
let tTema;
const cambiador = document.querySelector('.tema-visual');
document.body.classList.toggle('tema-claro');
document.body.classList.toggle('tema-oscuro');
document.body.style.transition = "1s ease"; //indicado por openAi
localStorage.setItem("tema", document.getElementsByTagName("body")[0].className);
const className = document.body.className;
if(className == 'tema-claro') {
tTema = 'Oscuro';
}
else if(className == 'tema-oscuro') {
tTema = 'Claro';
}
document.getElementById("temVis").innerHTML = tTema;
localStorage.setItem("textoTema", tTema);
console.log(localStorage.getItem("textoTema"));
}
function Salir() {
.
.
.
}
function Aplica_Estado_Inicial() {
if(localStorage.getItem("primeraCarga") === undefined) {
localStorage.setItem("primeraCarga", true);
document.body.className = "tema-claro";
document.getElementById("temVis") = Oscuro;
}
if(!(localStorage.tema === undefined)) {
document.body.className = localStorage.getItem("tema");
document.getElementById("temVis").innerHTML =
localStorage.getItem("textoTema");
}
}
功能function Cambia_Tema()是当我按下按钮时改变主题的功能，功能Aplica_Tema_Inicial()是将实际主题应用于新加载的页面的功能，但每次加载应用程序的新页面时，轻主题都被加载。
为了解决这个问题，我修改了applica_estado_inical ()
function Aplica_Estado_Inicial() {
if(localStorage.getItem("primeraCarga") === undefined) {
localStorage.setItem("primeraCarga", true);
document.body.className = "tema-claro";
document.getElementById("temVis") = Oscuro;
}
else if(localStorage.getItem("primeraCarga") == true) {
document.body.className = localStorage.getItem("tema");
document.getElementById("temVis") = localStorage.getItem("textoTema");
}
if(!(localStorage.tema === undefined)) {
document.body.className = localStorage.getItem("tema");
document.getElementById("temVis").innerHTML =
localStorage.getItem("textoTema");
}
}
添加一个标志，提醒应用不要应用任何初始化的on load主题，但这并没有帮助
和HTML文档以这种方式
<body onload="Aplica_Tema_Inicial()">
.
.
.
</body>
但是这不起作用
我的主题是按照以下顺序在CSS文件
.tema-oscuro {
--body-color: #161719;
--grad-uno-color: #4d4d51;
--grad-dos-color: #000101;
--primary-color-light: #f6f5ff;
}
.tema-claro {
--body-color: #e6e6d9;
--grad-uno-color: #bbbbbb;
--grad-dos-color: #4d4d51;
--primary-color-light: #1e2027;
}
所以，如果有人能帮我，我将非常感激。
11/01更新，下午3:10
显然，我可以通过改变我的代码中的几件事来解决这个问题，首先在javascript文件中，我改变了applica_estado_inial()和Cmabia_Tema()变量与事件监听器寻找点击两个按钮，然后我停止调用applica_estado_inial()每次javascript文件加载到我的应用程序的每个页面。
在html文档中，我删除了所有的onclick事件，并给body和所有按钮一个id，以便将它们与上面提到的事件侦听器关联起来，最后，就在body标签的下面一行，我添加了script标签，并在该标签中包含了一个简单的if，用于检查是否有一个名为"tema"的属性。不为'null'，则此属性存储正在应用的实际主题;如果满足条件，则将主题赋给主体的类。
这些变化使所有的页面加载没有首先应用轻主题。参见下面的代码
html文档:
<body class="tema-claro">
<script>
if(!(localStorage.getItem("tema") == null)) {
document.body.classList = localStorage.tema;
}
</script>
....
<div>
.....
</div>
<div class="salir">
<button id="bloquearSistema">Salir</button>
</div>
</body
<script src="app.js" type="text/javascript"></script>
<noscript>Debe habilitar Javascript para ver el sitio completo</noscript>
当然所有这些都包含在标签
中javascript文件如下
"use strict";
var estados = document.getElementById("temVis");
estados.addEventListener("click", function() {
let tTema;
const cambiador = document.querySelector('.tema-visual');
document.body.classList.toggle('tema-claro');
document.body.classList.toggle('tema-oscuro');
document.body.style.transition = "1s ease"; //indicado por openAi
localStorage.setItem("tema", document.getElementsByTagName("body")[0].className);
const className = document.body.className;
if(className == 'tema-claro') {
tTema = 'Oscuro';
}
else if(className == 'tema-oscuro') {
tTema = 'Claro';
}
document.getElementById("temVis").innerHTML = tTema;
localStorage.setItem("textoTema", tTema);
console.log(localStorage.getItem("textoTema"));
});
var bloqueado = document.getElementById("bloquearSistema");
bloqueado.addEventListener("click", function() {
var sHTTP = new XMLHttpRequest();
sHTTP.open("GET", "no-permitido", true);
sHTTP.send();
setTimeout(function(){window.open("autenticar.html", "_self");}, 1000);
});
我可以通过改变我的代码中的几件事来解决这个问题，首先在javascript文件中，我改变了applica_estado_inial()和Cmabia_Tema()变量与事件监听器寻找点击两个按钮，然后我停止调用applica_estado_inial()每次javascript文件加载到我的应用程序的每个页面。
在html文档中，我删除了所有的onclick事件，并为body和所有按钮提供了一个id，以便将它们与上面提到的事件侦听器相关联，最后，就在开始body标记的下面一行，我添加了一个script标记，并在该标记中包含了一个简单的if，用于检查是否有一个名为"tema"的属性。不为'null'，则此属性存储正在应用的实际主题;如果满足条件，则将主题赋给主体的类。
这些变化使所有的页面加载没有首先应用轻主题。参见下面的代码
html文档:
<body class="tema-claro">
<script>
if(!(localStorage.getItem("tema") == null)) {
document.body.classList = localStorage.tema;
}
</script>
....
<div>
.....
</div>
<div class="salir">
<button id="bloquearSistema">Salir</button>
</div>
</body
<script src="app.js" type="text/javascript"></script>
<noscript>Debe habilitar Javascript para ver el sitio completo</noscript>
当然，所有这些都包含在标签<html>
中javascript文件如下
"use strict";
var estados = document.getElementById("temVis");
estados.addEventListener("click", function() {
let tTema;
const cambiador = document.querySelector('.tema-visual');
document.body.classList.toggle('tema-claro');
document.body.classList.toggle('tema-oscuro');
document.body.style.transition = "1s ease"; //indicado por openAi
localStorage.setItem("tema", document.getElementsByTagName("body")[0].className);
const className = document.body.className;
if(className == 'tema-claro') {
tTema = 'Oscuro';
}
else if(className == 'tema-oscuro') {
tTema = 'Claro';
}
document.getElementById("temVis").innerHTML = tTema;
localStorage.setItem("textoTema", tTema);
console.log(localStorage.getItem("textoTema"));
});
var bloqueado = document.getElementById("bloquearSistema");
bloqueado.addEventListener("click", function() {
var sHTTP = new XMLHttpRequest();
sHTTP.open("GET", "no-permitido", true);
sHTTP.send();
setTimeout(function(){window.open("autenticar.html", "_self");}, 1000);
});