通过操作 CSS 文件和我的 Javascript 文件仅显示具有特定 id 的 div

Question

我是 Javascript DOM 的新手，所以在开始之前我需要一些帮助来了解基础知识 - 我有一个这样的 HTML 文件：

<div id="content">
    <h1>FOREST SIMULATOR</h1>
    <div id="intro">
        starting forest (leave empty to randomize):
        <br />
        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
        <br />
        <button>generate</button>
    </div>
    <div id="sim" class="hidden"></div>
    <div id="pushtray" class="overlay"></div>
</div>

我只想显示 div 和 id="intro" 中的内容，确保不显示 .overlay 和 #sim div。我需要制定适当的 CSS 规则并使用 Javascript 的 element.add、删除和包含，以便我可以控制哪些 CSS 规则处于活动状态。
我不完全确定这意味着什么以及它会是什么样子。

我在 CSS 文件中究竟做了什么？

Answer 1

你应该把 class hidden 给任何你不希望可见的元素（你可以在一个元素上有任意数量的 class ），然后添加一个 css 隐藏它们的规则：

<style>
  .hidden{
    display:none;
  }
</style>

然后如果你想在执行某种操作时显示这些隐藏的元素，你使用 javascript 分别添加和删除隐藏的 class。

var element = document.getElementById("sim");
element.classList.remove("hidden")

Answer 2

如果您不想显示 ID 为 "overlay" 和 "sim" 的 div 个元素，您可以将其写为：

document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";

Answer 3

此代码隐藏了 'overlay' 和 'pushtray' 元素：

                   document.getElementById('overlay').style.display = 'none';
                  document.getElementById('pushtray').style.display =  'none' ;

此代码仅隐藏 'overlay' 和 'pushtray' 元素的内容，但这些元素仍 "reserve" 在您的页面中。

               document.getElementById('overlay').style.visibility = 'hidden';
              document.getElementById('pushtray').style.visibility= 'hidden' ;

Answer 4

后面的css隐藏了内容div中的所有div个元素。之后它将显示简介 div.

使用 Javascript 将点击功能绑定到 "generate" 按钮以隐藏简介 div 并显示 sim div。

通过一些改动，您应该能够使其符合您的喜好。

//Wait for the dom to finish loading
document.addEventListener("DOMContentLoaded", function(){
  //then bind a click event handler to all the buttons inside the div with the id intro
  document.querySelector("div#intro button").addEventListener("click", function(){
    //hide the intro div and show the sim div when the button is clicked
    document.getElementById("intro").style.display = "none";
    document.getElementById("sim").style.display = "block";
  });
});

div#content div {
  display: none;
}

div#content div#intro {
  display: block;
}

<div id="content">
    <h1>FOREST SIMULATOR</h1>
    <div id="intro">
        starting forest (leave empty to randomize):
        <br />
        <textarea id="inputForest" name="inputForest" cols="16" rows="8"></textarea>
        <br />
        <button>generate</button>
    </div>
    <div id="sim" class="hidden">lalala</div>
    <div id="pushtray" class="overlay">lalala</div>
</div>

通过操作 CSS 文件和我的 Javascript 文件仅显示具有特定 id 的 div

Only showing a div with a certain id by manipulating CSS file and my Javascript file

html

javascript

css

dom

client-side