我一直在玩this Javascript，但我永远无法让 HTML 在页面上可见。这是我的 HTML 代码，打开页面后，除了 Canvas 粒子网络之外，我看不到任何内容。
<html id="particle-canvas">
<head>
<title></title>
<!-- Main CSS Stylesheet-->
<link rel="stylesheet" href="main.css">
<!-- Stylesheet for the icons from Font Awesome-->
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
</head>
<body>
<div class="content"> text </div>
<h1> Test </h1>
<!-- javascript-->
<script type="text/javascript" src="CPN/particle-network.min.js"> </script>
<script type="text/javascript">
var canvasDiv = document.getElementById('particle-canvas');
var options = {
particleColor: '#116466',
background: '#2C3531',
interactive: false,
speed: 'medium',
density: 'high'
};
</script>
<script> var particleCanvas = new ParticleNetwork(canvasDiv, options); </script>
</body>
</html>打开页面后，我看不到文本或测试。我究竟做错了什么？如果需要，可以找到正在运行的 JavaScript here .
最佳答案
这是因为您的选择器应用于 html 元素本身，这意味着您的整个页面。
<html id="particle-canvas">
您需要从 html 标记中删除 id="article-canvas" 属性，并将其应用到页面中的子元素。
例如:
<html>
<head>
<title></title>
<!-- Main CSS Stylesheet-->
<link rel="stylesheet" href="main.css">
<!-- Stylesheet for the icons from Font Awesome-->
<link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
</head>
<body>
<div class="content"> text </div>
<h1> Test </h1>
<div id="particle-canvas" style="height:300px">
<!-- javascript-->
<script type="text/javascript" src="particle-network.min.js">
</script>
<script type="text/javascript">
var canvasDiv = document.getElementById('particle-canvas');
var options = {
particleColor: '#116466',
background: '#2C3531',
interactive: false,
speed: 'medium',
density: 'high'
};
</script>
<script>
var particleCanvas = new ParticleNetwork(canvasDiv, options);
</script>
</div>
</body>
</html>
希望有帮助:)
关于javascript - HTML 'behind' Javascript 因此阻止看到任何文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48533914/