设置为显示时显示HTML元素：CSS中没有显示

Question

我有一个div元素，应该设置为display: none默认情况下display: none ，但不是。 就像整个.css语句被忽略了一样。

我有3个档案。

index.html ，这是我所有按钮和元素所在的位置。
main.js ，这是切换选项卡（我正在尝试创建一个偶像游戏）的功能所在的位置。
style.css ，这是一小部分CSS所在的位置。 我尝试将css包含在主要index.html ，我尝试使用<style>和</style>标记包围我的css，但它仍然不起作用。

我的css文件看起来像这样：

.hide {
    display: none;
}

我的include语句如下所示：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

我的div元素如下所示：

<div id="ees" class="hide">
    <h3>Events</h3>
    <span id="log">No events have occured yet</span>
</div>

我的用于切换标签的JS函数如下所示：

function toggle_tab(tabname) {
    if(document.getElementById(tabname).style.display == "none")
        document.getElementById(tabname).style.display = "block";
    else
        document.getElementById(tabname).style.display = "none";
}

我触发事件的按钮如下所示：

<button onclick="toggle_tab('ees');">Events</button>

运行代码时的结果很奇怪。 该按钮仅在按两次而不是按一次后才起作用（请记住，默认情况下应将其设置为none，按一次则应显示其内容）。 之后，它可以正常工作，但是您需要在页面加载时按两次，这是一个问题。 我将此添加到函数中以查看发生了什么，结果如下：

function toggle_tab(tabname) {
    console.log("Display: "+document.getElementById(tabname).style.display);
    if(document.getElementById(tabname).style.display == "none")
        document.getElementById(tabname).style.display = "block";
    else
        document.getElementById(tabname).style.display = "none";
}

这是页面加载时首次触发按钮时的输出外观。

显示：

而已。 就像display: none在我的CSS类定义中display: none被忽略。 我想要的是控制台display: none页面加载时display: none 。 这也会在有人第一次选择激活按钮时显示按钮的内容，因为在交互开始时默认值将为none。

Answer 1

您最初是通过CSS类hide来设置div元素的CSS display属性。 但是，当您检查它是否隐藏时，您正在查看的是div元素的style属性的display属性，这与检查CSS类不同。 div获取display: none CSS类hide display: none设置，但是在其自己的style属性中没有该设置。

由于您直接设置了div的display属性，因此在第一次之后它就可以工作，然后您的测试就可以了。

如果加载页面，请打开JavaScript控制台，然后输入：

document.getElementById('ees').style.display

您会看到它的结果为空字符串，而不是“ none”。

您可能想做的是切换元素的hide类，而不是切换其自身样式的display属性。

隐藏元素：

document.getElementById('ees').className = 'hide'

再次显示：

document.getElementById('ees').className = ''

设置为显示时显示HTML元素：CSS中没有显示

问题描述

1 个解决方案

解决方案1
3 已采纳 2019-07-21 22:57:48

设置为显示时显示HTML元素：CSS中没有显示

问题描述

1 个解决方案

解决方案1 3 已采纳 2019-07-21 22:57:48

解决方案1
3 已采纳 2019-07-21 22:57:48