javascript - 我是初学者,面临 Javascript 和 html 链接的问题。在 HTML 中看不到 Javascript 的效果
问题描述
我创建了一个 admin.html 文件,其中在 h1 标记中有 div 类。我已经使用脚本连接了 admin.js 文件:src 但是当我在 Javascript 中更改颜色时,它无法看到效果,但是当我在 Chrome 中检查时,相同的代码工作。帮助表示赞赏。
管理员.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
<link rel="stylesheet" href="style2.css">
<script src="admin.js"></script>
</head>
<body>
<ul class="list">
<li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a href="#dashbord">Dashboard</a></li>
<br>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>
管理员.js
const q = document.querySelector('.div h2');
q.style.color = 'red';
解决方案
原因是在读取 HTML 文件和构建 DOM 之前解析和评估脚本。DOM 元素此时不存在。
将script
标签移动到body
.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<ul class="list">
<li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a href="#dashbord">Dashboard</a></li>
<br>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
<script src="admin.js"></script>
</body>
</html>
一些框架,如 Webpack 将script
标签添加到头部并添加defer
,但我不确定这是否总是有效。根据https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script它应该始终有效。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin</title>
<link rel="stylesheet" href="style2.css">
<script src="admin.js" defer></script>
</head>
<body>
<ul class="list">
<li id="dashbord"style="font-size: 40px; padding-top: 8px; height: 50px;"><a href="#dashbord">Dashboard</a></li>
<br>
<li><a class="active" href="#home">Home</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<div class="div" style="margin-left:25%;padding:1px 16px;height:1000px;">
<h2>Fixed Full-height Side Nav</h2>
<h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
<p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
<p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
<p>Some text..</p>
</div>
</body>
</html>
推荐阅读
- javascript - 如何从网页中提取信息
- php - 使用 Imagick 显示 CMYK 黑色
- android - 在android中打开屏幕时如何启动活动?
- c - 如何删除c中索引处的字符?
- python - 如何在 matplotlib 中创建自定义发散颜色图?
- nfc - PN532 - 标签仿真问题 - Java/Raspberry Pi
- angular - 如何使用 ms-adal-angular6 保持身份验证?
- scala - 在 Scala 中使用单个类型别名将多个注释应用于类和/或字段
- ios - SwiftUI在包含水平ScrollView的垂直ScrollView中拖动手势
- javascript - 如何将游戏服务器数据打印到 json?