Question

我一直在使用this Javascript，但我永远无法在页面上看到HTML。这是我的HTML代码，一旦我打开页面，除了画布粒子网络之外我什么都看不到。

<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。

Answer 1

这是因为您的选择器已应用于html元素本身，这意味着您的整个页面。

<html id="particle-canvas">

您需要从id="particle-canvas"标记中删除html属性，并将其应用于页面中的子元素。

前：

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

希望有所帮助：）

HTML'背后'Javascript因此阻止任何文本被看到

1 个答案: