Question

这是我到目前为止所拥有的。基本上我们有一个内部网站，为Mac用户使用AFP链接，为PC用户使用Windows IE风格链接。我们过去曾单独维护这些页面，但我试图将它们统一起来。我使用带有ID＆＃34; brandsmac＆＃34;的div s和＆＃34; brandspc＆＃34;并试图隐藏每种类型用户不必要的部分。当我运行这个页面时，我的页面又回来了。要在这里抛出另一个扳手，这是一个带有纯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';
    }
}

Answer 1

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

我假设你已经开始隐藏这两个元素（#brandspc和#brandsmac）和display: none;所以试图更改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

Answer 2

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

os = navigator.platform;

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

2 个答案: