我是初学者,面临javascript和html链接的问题。Can';在HTML中看不到javascript的效果
我已经创建了一个admin.html文件,其中h1标记中有div类。我已经使用script:src连接了admin.js文件,但是当我在javascript中更改颜色时,无法看到效果。但当我在chrome中检查时,同样的代码也在工作。谢谢你的帮助 admin.html我是初学者,面临javascript和html链接的问题。Can';在HTML中看不到javascript的效果,javascript,html,dom,javascript-events,javascript-objects,Javascript,Html,Dom,Javascript Events,Javascript Objects,我已经创建了一个admin.html文件,其中h1标记中有div类。我已经使用script:src连接了admin.js文件,但是当我在javascript中更改颜色时,无法看到效果。但当我在chrome中检查时,同样的代码也在工作。谢谢你的帮助 admin.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<!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>
原因是在读取HTML文件和构建DOM之前,会对脚本进行解析和计算。DOM元素当时不存在
将
脚本
标记移动到正文
的末尾
<!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,会在头部添加脚本
标记,并添加延迟
,但我不确定这是否总是有效。用标准元素类型命名类是相当混乱的。我不建议你那样做。还将学习如何在浏览器中使用开发人员工具。您的代码打印的错误消息是一个很有用的搜索词,可以在Google中键入。
<!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>
<!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>