JavaScript实现Cookie存在时显示Div的问题排查

你的核心问题是Cookie检测正常，但DOM元素的display控制失效，大概率是以下两个原因：

1. 脚本执行时机过早 #

如果你的脚本写在<head>标签里，或者DOM元素之前，此时浏览器还没渲染出目标Div，document.getElementById("protected")会返回null，后续修改style.display自然无效。

2. 样式ID拼写错误 #

你提到头部样式表设置了#protectd {display:none;}，但代码里获取的是ID为protected的元素——这里样式选择器少了一个字母e，导致初始隐藏样式根本没作用在目标元素上。

修正后的实现方案 #

方案一：将脚本放在DOM元素之后（推荐） #

把脚本移到目标Div的下方，或者直接放在</body>闭合标签前，确保DOM已加载完成：

<div id="protected">需要控制显示的内容</div>

<script>
const elem = document.getElementById("protected");
// 先默认隐藏
elem.style.display = "none";
if (document.cookie.indexOf("pointsuser") !== -1) {
    elem.style.display = "block";
} else {
    elem.style.display = "none";
}
</script>
</body>

方案二：用DOM加载事件包裹代码 #

如果必须把脚本放在<head>里，用DOMContentLoaded事件确保DOM渲染完成后再执行逻辑：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const elem = document.getElementById("protected");
    // 提前判断元素是否存在，避免报错
    if (!elem) return;
    elem.style.display = document.cookie.indexOf("pointsuser") !== -1 ? "block" : "none";
});
</script>

方案三：用类名控制样式（更易维护） #

先定义CSS类：

.hidden { display: none; }

然后给目标Div默认加上hidden类，再通过JS切换：

<div id="protected" class="hidden">需要控制显示的内容</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const elem = document.getElementById("protected");
    if (!elem) return;
    if (document.cookie.indexOf("pointsuser") !== -1) {
        elem.classList.remove('hidden');
    } else {
        elem.classList.add('hidden');
    }
});
</script>

关键注意事项 #

• 确保样式选择器的ID和元素ID完全一致：把样式里的#protectd改成#protected。
• 打开浏览器控制台（F12）查看是否有报错，比如Cannot read properties of null，就能快速定位元素未找到的问题。

内容的提问来源于stack exchange，提问作者user2976328