JS改变HTML组件样式_js修改组件样式放哪-优快云博客

本文记录了如何通过localStorage实现页面间跳转时的状态管理，如登录按钮控制及个人中心切换，遇到的兼容性问题及其解决方案，重点在于HTML和JS代码的正确放置顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天碰到一个困扰自己很久的问题，最后终于解决了，做个笔记记录一下。

需求：做一个按钮实现跳转到登录页面，如果登录成功则按钮消失，然后换成一个前往个人中心的按钮。

涉及到跨页面传参数。

用localStorage解决。

在登录页面

function load() {
    localStorage.setItem("loading", 'true');
    window.history.back();
}

在主页获取

function online() {
    var a = localStorage.getItem("loading");
    if (a) {
    //display是组件的一个属性，display="none"是代表该组件隐藏
        document.getElementById("load").style.display = "none";
    }
}

在主页面设置一个自执行的函数

在js文件开始处加一行代码

window.online();

截取了部分html代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
     <script src="./主页.js">
    </script>
</head>

<body>
    <input type="button" class="load" onclick="load()" value="登录" style="display: block;" id="load">
</body>

</html>

这时，按传统编码，这个功能应该是已经实现了啊，我鼠标放在浏览器刷新按钮上，没有在写了，准备看看，不码了啊。可是这个调试器一上来就是一个报错、无法运行、不能实现。我大意了啊，没有闪，当时就捂着头发流眼泪了。我说浏览器你不讲码德，它说：“不好意思，不好意思，我是不兼容，我是乱运行的”。它可不是乱运行的啊，上来就是一个报错，吭，一个无法运行，一个不能实现。一个就是训练有素，有bug而来。我劝，编译器，耗子尾汁，好好反思，以后不要不兼容啊。

在这里插入图片描述
报这样的错，查了很久才发现，原来是body中的内容js无法调用，导致 document.getElementById(“load”).style为空。

于是我把js的引用放到了后面

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
     <script src="./主页.js">
    </script>
</head>

<body>
    <input type="button" class="load" onclick="load()" value="登录" style="display: block;" id="load">
      <script src="./主页.js">
    </script>
</body>

</html>