如何使用 JavaScript 中的 if 语句使 HTML 文本变得不可见



我正在为其他人使用设置年龄限制,但我希望一些 HTML 文本通过这个 if 语句不可见。这是 h3 文本HTML 文本:

如果您正在阅读本文,那么您已超过 18 岁。

JavaScript:

var user = prompt("Enter your age [NO LETTERS]: ");

if (user<18) {

document.write("<div style='font-family:Arial;font-size: 29px;''>Age restrictions have been enabled for this session.</div>");

alert("You are too young for this content, some restrictions might be activated.");
}
  • 请不要使用document.write因为它仅用于测试,它实际上可能会重置页面。

  • 只有两种可能的结果,用户年龄大于 18 岁或更少。请改用confirm()来消除冗余输入。

  • 如果有很多内容
  • 需要审查,将所有内容隐藏在JS中不是一个可行的解决方案。更好的方法是仅将特定类应用于 body:

Javascript:

var message = "Are you older than 18?";
if(!confirm(message)) {
    document.body.classList.add("nsfw");
    // Inform the user that some content might be hidden.
}
使用

CSS 进行设计和布局,使用 JS 进行逻辑。为所有敏感内容分配"敏感"类:

.HTML:

<body>
...
<span class="any-other-class">Hi</span>
<span class="sensitive any-other-class">If you are reading this, you are over 18.</span>
</body>

.CSS:

body.nsfw .sensitive {
    display: none!important;
}

这样,如果用户未成年,每个具有类 sensitive 的元素都会被自动隐藏。

但是等等!也许您想存储用户的选择?使用会话存储!

function agecheck() {
    var key = "nsfw-preference"
    var message = "Are you older than 18?";
    // Remove nsfw class if it exists
    document.body.classList.remove("nsfw");
    // No preference data.
    if(window.sessionStorage.getItem(key) === null) {
        // Ask the user:
        if(!confirm(message)) 
            window.sessionStorage.setItem(key, "true");
        else
            window.sessionStorage.setItem(key, "false");
    }
    // If the user is underage
    if(window.sessionStorage.getItem(key) == "true") {
        document.body.classList.add("nsfw");
        // Inform the user some content might be hidden. Avoid alerts()!
    }
    // User isn't underage
    else if(window.sessionStorage.getItem(key) == "false") {
        // Inform the user if needed.
    }
}

加载 DOM/页面后调用此函数一次。

最新更新