javascript - 如何在css和javascript中单击时使汉堡可见?
问题描述
我想在媒体屏幕 600 像素中制作汉堡包。我添加了 javascript 让它工作,但它不适用于我的网站!请检查代码并告诉您有什么问题
它显示了这个 weeoe - Uncaught TypeError: Cannot read property 'style' of null
我只希望汉堡包 style.display 如果没有,则更改为“flex”,如果是 flex,则通过单击 hamgurger div 更改为无。
function showHamburger(){
var hamburger_icon = document.querySelector("icon");
if (hamburger_icon.style.display == "none") {
hamburger_icon.style.display = "flex";
hamburger_icon.style.flexDirection = "column";
}else if (hamburger_icon.style.display == "flex") {
hamburger_icon.style.display = "none";
}
}
@import url("https://fonts.googleapis.com/css2?family=Ranchers&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merienda&display=swap");
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
font-size: 100%;
}
::-moz-selection {
background: #00bbff;
color: white;
}
::selection {
background: #00bbff;
color: white;
}
.navbar {
font-family: 'Nunito', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
height: 5em;
background: white;
-webkit-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
position: fixed;
width: 100%;
z-index: 100;
}
.navbar .logo {
margin: 20px 0 0 40px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.navbar .menu {
margin: 25px 40px 0;
}
.navbar .menu a {
text-decoration: none;
color: black;
margin: 0 0 0 20px;
font-size: 20px;
-webkit-transition: 0.01s ease-in-out;
transition: 0.01s ease-in-out;
font-weight: normal;
}
.navbar .menu a:hover:first-child {
color: green;
border-bottom: 2px solid green;
}
.navbar .menu a:hover:nth-child(2) {
color: red;
border-bottom: 2px solid red;
}
.navbar .menu a:hover:last-child {
color: #f200ff;
border-bottom: 2px solid #f200ff;
}
.navbar .logo h1 {
font-size: 30px;
}
.bars-icon i {
font-size: 30px;
margin-top: 20px;
margin-right: 30px;
}
.bars-icon {
display: none;
}
.about h1 {
font-size: 70px;
font-family: 'Merienda', cursive;
font-weight: lighter;
padding: 20px;
text-justify: inter-word;
}
.about {
background: -webkit-gradient(linear, left top, right top, from(#2ce61b), to(cyan));
background: linear-gradient(to right, #2ce61b, cyan);
border-radius: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 30px;
padding-bottom: 30px;
margin-left: 30px;
margin-right: 30px;
}
.image-of-about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.image-of-about img {
border-radius: 50%;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
.image-of-about img:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
cursor: none;
}
.button-of-about {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 30px;
}
.button-of-about a {
padding: 10px 50px 10px 50px;
background: red;
text-decoration: none;
color: black;
font-family: "Nunito",sans-serif;
-webkit-animation-name: bg-change;
animation-name: bg-change;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
border-radius: 40px;
-webkit-transition: 0.3s;
transition: 0.3s;
font-size: 30px;
}
.button-of-about a:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.starting-info p {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
margin-top: 30px;
font-size: 20px;
font-family: sans-serif;
}
.text12323 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.hamburger {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
width: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 10px;
display: none;
}
.hamburger a {
padding: 10px;
border-top: 1px solid black;
border-bottom: 1px solid black;
font-family: 'Nunito', sans-serif;
text-decoration: none;
color: black;
background: white;
-webkit-transition: 0.1s ease;
transition: 0.1s ease;
}
.hamburger a:first-child:hover {
background: green;
}
.hamburger a:nth-child(2):hover {
background: red;
}
.hamburger a:last-child:hover {
background: pink;
}
@-webkit-keyframes bg-change {
0% {
background: red;
}
20% {
background: yellow;
}
40% {
background: #22e918;
}
60% {
background: #00ffe5;
}
80% {
background: #dd00ff;
}
100% {
background: red;
}
}
@keyframes bg-change {
0% {
background: red;
}
20% {
background: yellow;
}
40% {
background: #22e918;
}
60% {
background: #00ffe5;
}
80% {
background: #dd00ff;
}
100% {
background: red;
}
}
@media only screen and (max-width: 600px) {
.bars-icon {
display: block;
cursor: pointer;
}
.menu {
display: none;
}
.about h1 {
font-size: 50px;
}
}
<!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>Aviral</title>
<script src="https://kit.fontawesome.com/978a1c194b.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" href="../images/MY PICTURE copy.jpg" type="image/x-icon">
<link rel="stylesheet" href="../styles/home.css">
</head>
<body>
<div class="navbar">
<div class="logo"><h1>Aviral</h1></div>
<div class="menu">
<a href="learn.html">Learn</a>
<a href="skills.html">Skills</a>
<a href="works.html">Contact</a>
</div>
<div class="bars-icon" id="icon" onclick="showHamburger()">
<i class="fas fa-bars"></i>
</div>
</div><br><br><br><br>
<div class="hamburger">
<a href="learn.html">Learn</a>
<a href="skills.html">Skills</a>
<a href="works.html">Contact</a>
</div><br><br><br><br><br>
<div class="about">
<div>
<h1>Hi, I am Aviral</h1>
<div class="image-of-about">
<img src="../images/MY PICTURE copy.jpg" alt="Picture of Aviral" id="my-image">
</div>
<div class="starting-info">
<p style="padding: 15px;">I am Aviral,12 year old kid!
</p>
</div>
<div class="button-of-about">
<a href="">Contact</a>
</div>
</div>
</div>
<script src="../js/script.js"></script>
</body>
</html>
解决方案
欢迎来到堆栈溢出!
你很亲密。在你的 JavaScript 中你有document.querySelector("icon")
,但是为了选择一个你必须做的id的元素,即。. 或者,您可以执行. 给猫剥皮的方法总是不止一种:)icon
#icon
document.querySelector("#icon")
document.getElementById("icon")
目前发生的事情document.querySelector("icon")
并没有给你任何东西,所以它是null
,这意味着那hamburger_icon
是null
,所以当你尝试去时hamburger_icon.style
,它基本上是null.style
,它给你错误。
如果你很好奇,document.querySelector("icon")
会尝试寻找一个名为“icon”的元素,就像如何document.querySelector("div")
寻找 a<div>
和如何document.querySelector("h1")
寻找 一样<h1>
。
小提示:您在组织代码并使其正确标签化以及所有这些方面做得很好,但下次请查看此页面以更好地格式化内容。特别是我想到的是对代码跨度使用反引号,like this
.
推荐阅读
- javascript - 错误来自护照本地猫鼬,运行我用节点 js 编写的 app.js 文件时的节点模块
- c# - 发出 POST 请求
- robotframework - 在测试用例中添加 300 秒的睡眠时,机器人测试用例的执行没有结束
- javascript - window.open 不工作解析 URL 被截断
- c++ - Arduino c+ >> 操作
- html-agility-pack - 忽略一些 TR 节点
- java - Java:具有可运行成员的对象的深层副本和复制构造函数
- c - 因为使用数学时编译需要时间,这标志着我的错误
- sql - 从具有相同外键的所有行中的列值之一大于给定值的表中选择外键
- numpy - 从 NumPy 数组中获取按列的最大值