Question

这是一个div块，在我的页面顶部组成一个导航栏的5个几乎相同的div的顶行中显得很好 - 虽然有5个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个divs-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，如果没有登录，则set display = none：

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>';

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

2 个答案: