<div>块的CSS样式在display = none然后display = block上更改

Question

这是一个div块，看起来很好，作为顶部5个几乎相同的div的一部分组成了我页面顶部的导航栏 - 虽然有5个div像我在这里展示的那个div ，我只是在我的“用户仪表板”链接上显示导航栏最右端的那个：

<div class="pageTopRowContainer"> // this is the containing div for all 5 of the Nav bar divs

    // not shown here are the first 4 identical-except-in-name-and-linked-page divs 
    //    with <a> anchors.......
    // And here's the right most div-with-<a>-anchor on my Nav bar:

    <div class="pageTopRowContainerLabel" id="UserAccountNavbarLinkId">
        <a class="pageTopRowTextStyle"
           href="http://localhost/ServiceMain/UserDashboard.php">User Dashboard</a>
    </div>
</div>

以下是CSS样式：

.pageTopRowContainer
{
    display:inline-block;
    width:100%;
    font-family: Arial, sans-serif;
    font-weight: bold;
}


.pageTopRowContainerLabel
{
  display:inline-block;
  background-color: green;
  color: RGB(255,255,255);
  padding-top: 2px;
  padding-bottom:2px;
  padding-left:5px;
  padding-right:5px;
}


.pageTopRowTextStyle
{
    color:RGB(255,255,255); 
    text-decoration:none;
}

所有5个div-with-anchors看起来很好： 我的导航栏中的一行从左到右，每个div作为块，绿色背景足够宽，可以放入每个div中的文本标签。

给我带来麻烦的div是上面的那个，文本标签为“User Dashboard”的那个。 它通常看起来很好，作为导航栏上最右边的第5个div。

我需要隐藏最右边的div，直到用户登录为止。

所以我添加了javascript（下面）来根据“登录状态”的会话变量显示/隐藏上面的div。

这个显示/隐藏逻辑的工作原理是，当用户登录并注销时，它显示并隐藏了最右边的div“User Dashboard”。

除了导航栏右端的矩形外，绿色背景宽度足以容纳文本标签“用户仪表板” - 当'display = block'javascript执行时 - “用户仪表板”（以前最右边）div - 现在显示在其他4个导航条div 下方 ，其绿色背景与浏览器一样宽，“用户仪表板”文本左对齐。

我不知道这可能是一个“浮动”问题 - 再看看上面的div声明。 div声明的显示方式与导航栏左侧的其他4个div 完全相同 - 在我添加下面的Javascript之前，所有5个div在我的导航栏中从左到右显示，每个div作为块绿色背景足够宽，我在每个div中都有文本标签。

这是显示/隐藏的javascript代码 - 它只适用于导航栏上最右边的div（上图） - 如果用户登录后需要查看上面的“用户仪表板”div，如果没有登录，我设置display =没有：

if ( isset($_SESSION['loginStatus']))
{
    // we get here iff the 'loginStatus' session variable has already been
    // created for this user's session.  
    // check if there is a logged-in user, then make visible the 
    // 'User Dashboard' button-link on the Nav bar
    if($_SESSION['loggedInUserName'] != "")
    {
        echo '<script type="text/javascript"> 
             document.getElementById(
                  "UserAccountNavbarLinkId").style.display="block";</script>'; 
        echo '<script type="text/javascript"> 
             document.getElementById(
                  "UserAccountNavbarLinkId").div.className
                            ="pageTopRowContainerLabel";</script>';
    }
    else
    {
        // no logged-in user, so hide the 'User Dashboard' button-link on the Nav bar
        echo '<script type="text/javascript"> 
             document.getElementById(
                       "UserAccountNavbarLinkId").style.display="none";</script>';    
    }
}

当我将div重新设置为display = block时，为什么我的CSS样式不会被“尊重”？

我尝试了以下内容并没有帮助：在上面的代码中我添加了

document.getElementById(
                  "UserAccountNavbarLinkId").div.className
                            ="pageTopRowContainerLabel

尝试强制div再次采用它的CSS样式。 没变。

我需要做什么，以便当我的div出现时它会回到应该的位置 - 导航栏上其他4个div的右侧？

Answer 1

因为您将其设置为display = block。 如果你想恢复到CSS所说的内容，请使用element.style.display = ""; - 将样式设置为空字符串允许CSS再次接管。

Answer 2

你开始使用display: inline-block ，而不是display: block 。 div显示在下方，全宽，因为，你将它设置为block ，这就是完全相同的。 而是将其设置回inline-block 。

echo '<script type="text/javascript"> 
         document.getElementById(
              "UserAccountNavbarLinkId").style.display="inline-block";</script>';