脚本标记放置会产生奇怪的结果吗？
脚本标记放置会产生奇怪的结果吗？
提问于 2020-05-24 20:20:33
这个脚本只有在“汉堡包”目录下才能运行，我不知道为什么？如果我把它放在身体或头部，为什么它不起作用？此外，如果我将其导出为.js文件并将其src到HTML中，我也不能让它在我的生命周期中工作。帮帮忙好吗？这是我的第一个网站，我已经完全被这样一个简单的问题搞砸了……
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet"/>
<title>My Azienda Agricola</title>
</head>
<body>
<header>
<nav>
<div class="hamburger">
<script>
let test=document.getElementsByClassName("hamburger");
test[0].style.backgroundColor="blue";
</script>
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</header>
</body>
</html>回答 3
Stack Overflow用户
发布于 2020-05-24 20:30:53
尝试将script标记放在body标记的末尾，因为它不会在body或head标记之外进行验证。有关详细信息，请参阅here。
Stack Overflow用户
发布于 2020-05-24 20:32:48
使用document.querySelector()而不是document.getElementsByClassName()这是一种更先进的方法来做选择器，see here。除此之外，你的.hamburger没有宽度和高度，如果它是0px，就不能显示蓝色。正如你所看到的，我添加了50px的宽度和高度，蓝色的正方形出现了。我没有你的样式表。
这是你尝试去做的一个实际例子：
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta charset="utf-8" />
<title>My Azienda Agricola</title>
<style>
.hamburger {
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<header>
<nav>
<div class="hamburger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</header>
<script>
let test = document.querySelector(".hamburger");
test.style.backgroundColor = "blue";
</script>
</body>
</html>你也可以在这里使用这个例子：https://codesandbox.io/s/vigilant-resonance-yxpp9?file=/index.html
Stack Overflow用户
发布于 2020-05-24 20:44:11
我会这样做：
<!DOCTYPE html>
<html lang="it" dir="ltr">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet"/>
<title>My Azienda Agricola</title>
</head>
<body>
<header>
<nav>
<div class="hamburger">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
</nav>
</header>
<script src="javascript.js"></script>
</body>
</html>然后创建javascript.js文件并在其中添加脚本。确保它与您的.html文件位于同一根文件夹中。如果您将其放在一个文件夹中，请确保根据需要调整src (例如js/javascript.js)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61985877
复制相关文章
相似问题
腾讯云开发者
