如何显示基于操作系统的 HTML 元素？答案

【问题标题】：How can I display HTML elements based on OS?如何显示基于操作系统的 HTML 元素？
【发布时间】：2016-07-10 21:57:55
【问题描述】：

这是我目前所拥有的。本质上，我们有一个内部网站，为 Mac 用户使用 AFP 链接，为 PC 用户使用 Windows IE 样式链接。我们过去分别维护了这些页面，但我正在尝试将它们统一起来。我将divs 与ID 的“brandsmac”和“brandspc”一起使用，并试图隐藏每种类型用户不需要的部分。当我运行这个我的页面只是回到空白。在这里扔另一个扳手，这是一个带有纯 HTML 主页的 Wordpress 站点。这是首页。我在这里找到了类似的帖子，其中很多都有帮助，但我遇到了障碍。提前致谢。

function loadBrandsPage() {
    var OSName="Unknown OS";
    if (navigator.appVersion.indexOf("Win")!=-1) { 
        OSName="Windows";
    } else {
        OSName="MacOS";
    }
    if(OSName == "Windows") {
        document.getElementById("brandsmac").style.display = 'none';
        document.getElementById("brandspc").style.visibility="visible"; 
    }
    if(OSName == "MacOS") {
        document.getElementById("brandsmac").style.visibility="visible";
        document.getElementById("brandspc").style.display = 'none';
    }
}

【问题讨论】：

如果我调用你的函数，我会得到“ReferenceError: Windows is not defined”
你没有忘记字符串 "Windows" 和 "MacOS" 周围的引号吗？
感谢您的回答 Brett 和 Roland。我刚刚注意到 Windows 和 MacOS 周围缺少引号。我已经更正了，但仍然没有。
当我运行您的函数时，它似乎按预期运行（现在您已添加引号），您收到什么错误消息？您的 ID 是否已正确命名和到位？
这是我得到的错误：TypeError: document.getElementById(...) is null

标签： javascript html wordpress

【解决方案1】：

您正在混合使用 CSS display 和 visibility。如果您将行 document.getElementById("brandspc").style.visibility="visible"; 更改为 document.getElementById("brandspc").style.display="block"; 它将起作用。

我假设您已经开始使用 display: none; 隐藏两个元素（#brandspc 和 #brandsmac）所以尝试更改它的 visibility 不会产生任何结果。

display: none：从 DOM 中移除元素。

visibility: hidden：对用户隐藏元素，它保留元素的间距。

如果您希望在页面加载时发生这种情况（如您的评论中所示），您可以使用自调用函数。您只需使用现有函数并将其包装在括号中：

(function loadBrandsPage() {
    var OSName="Unknown OS";
    if (navigator.appVersion.indexOf("Win")!=-1) { 
        OSName="Windows";
    } else {
        OSName="MacOS";
    }
    if(OSName == 'Windows') {
        document.getElementById("brandsmac").style.display = 'none';
        document.getElementById("brandspc").style.display="block"; 
    }
    if(OSName == 'MacOS') {
        document.getElementById("brandsmac").style.display="block";
        document.getElementById("brandspc").style.display = 'none';
    }
})();

我也更新了我的小提琴以反映这一点。

more info

Here's a demo of it working with the above changes

【讨论】：

感谢您的回答 EnigmaRM。我看到了您的演示并感谢您为测试它所做的工作。但是，您的解决方案依赖于要单击的按钮。我希望在加载页面时运行该功能。我看到另一个帖子here 显示代码<body onload='hideBoth()'>，但这似乎对我也不起作用。
按钮只是触发功能的一种方式。您可以使用任何想要触发该功能的事件。我已经更新了我的答案，以便它在页面加载时自动发生。我们甚至可以走不同的路线并将函数分配给事件侦听器以等待 DOM 准备好。

【解决方案2】：

您可以通过这种方式找到操作系统：

os = navigator.platform;

【讨论】：