提问人： 提问时间：11/24/2018 最后编辑：Adriano 更新时间：11/24/2018 访问量：190
仅通过操作 CSS 文件和我的 Javascript 文件来显示具有特定 id 的 div
Only showing a div with a certain id by manipulating CSS file and my Javascript file
问：
我是 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 中的内容，确保不显示 和 div。我需要制定适当的 CSS 规则并使用 Javascript 的 element.add、remove 和 contains，这样我就可以控制哪些 CSS 规则处于活动状态。
我不完全确定这意味着什么以及它会是什么样子。id="intro".overlay#sim
我在我的 CSS 文件中到底在做什么？
答：
0赞
SpeedOfRound
11/24/2018
#1
你应该把这个类给任何你不想看到的元素（你可以在一个元素上有任意数量的类），然后添加一个隐藏它们的 css 规则：hidden
<style>
.hidden{
display:none;
}
</style>
然后，如果你想在采取某种操作时显示这些隐藏元素，你可以使用 javascript 分别添加和删除隐藏的类。
var element = document.getElementById("sim");
element.classList.remove("hidden")
1赞
Marko Panushkovski
11/24/2018
#2
如果您不想显示 id 为 “overlay” 和 “sim” 的 div 元素，您可以将其编写为：
document.getElementById("sim").style.display="none";
document.getElementById("pushtray").style.display="none";
评论
0赞
11/24/2018
所以这在我的 Javascript 文件中正确吗？我的 js 文件如何知道所指的“文档”？我正在使用 express-static 来提供 html 文件，它是这样知道的吗？
0赞
Marko Panushkovski
11/24/2018
它应该是正确的。您的 javascript 文件不必知道它在哪个文档中使用。您可以将其附加到它正确执行工作的每个 html 文件中。换句话说，你可以这样附加它：<head> <script src=“theNameOfYourJsFile.js”></script> </head> 每次你要在 js 文件中使用对象文档时，它总是会引用它所链接到的 html 文件
0赞
11/25/2018
你知道为什么我收到文档的 referenceError 吗？在我的html中，它写在标题<script src=“sim.js”></script>中。然而，当我输入节点sim.js时，它会在我引用文档的部分给我一个 referenceError。
0赞
Marko Panushkovski
11/25/2018
你的html文件和你的javascript文件必须在同一个文件夹中，如果不是，你应该把它们放在一起（以及css和html文件在一起）。
0赞
Bálint Cséfalvay
11/24/2018
#3
此代码隐藏了“overlay”和“pushtray”元素：
document.getElementById('overlay').style.display = 'none';
document.getElementById('pushtray').style.display = 'none' ;
此代码仅隐藏“overlay”和“pushtray”元素的内容，但这些元素仍“保留”在页面中的位置。
document.getElementById('overlay').style.visibility = 'hidden';
document.getElementById('pushtray').style.visibility= 'hidden' ;
0赞
Mark Baijens
11/24/2018
#4
以下 css 隐藏了 content div 中的所有元素。之后，它将显示介绍 div。div
使用 Javascript 将单击函数绑定到“生成”按钮，以隐藏介绍 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>
评论