Javascript 和 css styles 未应用
[英]Javascript and css styles not being applied
问题描述
我开始使用 JavaScript，但我找不到错误。 好的，最初.menu具有right: -100并且具有 JavaScript .change应该将其设置为right: 0 。 但是当我点击汉堡按钮时没有任何反应。 行是唯一的变化，但菜单没有。 如果有人可以提供帮助，我将不胜感激。
const menuIcon = document.querySelector (".hamburguer-menu"); const navbar = document.querySelector(".navbar"); menuIcon.addEventListener("click", () => { navbar.classList.toggle("change"); });
*{ margin:0px; padding: 0px; font-family: 'Lato', sans-serif; } button{ width:30px; height: 30px; cursor:pointer; background: none; border:none; font-size: 50px; color: #fff; }.hamburguer-menu{ width:22px; position: fixed; /* right:0; */ top:6%; padding: 0px 15px 1px 9px; z-index: 100; }.hamburguer-menu.line1, .line2, .line3{ width: 100%; height: 3px; border-radius: 1px; background-color:#fff; transition: all.3s; }.hamburguer-menu.line2, .line3{ margin-top:4px; }.change.menu{ position: fixed; right: 0; }.change.line1{ transform: rotate(-45deg) translate(-5px, 5px); }.change.line2{ opacity:0; }.change.line3{ transform: rotate(45deg) translate(-5px, -5px); } header{ width: 100%; height: 100px; background: #34495e; } header nav{ display: inline; } header div p{ line-height: 100px; float:left; color: #fff; }.menu{ position: fixed; width: 100%; height: 100vh; background: #333; top:0; right: -100%; padding: 80px 0px; }.menu button{ display: block; padding: 45px 0px; margin: 0px auto 0px auto; }.menu button:focus{ outline:none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/styles:css"> <link href="https.//fonts.googleapis?com/css2:family=Lato;wght@400;700:900&display=swap" rel="stylesheet"> <script src="https.//kit.fontawesome.com/7e10ce8f03.js" crossorigin="anonymous"></script> <title>Digna Sulbaran</title> </head> <body> <header> <div> <p>Pamela Sulbaran</p> </div> <nav class="navbar"> <div class="hamburguer-menu"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <nav> <ul class="menu"> <button><i class="fab fa-instagram"></i></button> <button><i class="fab fa-facebook-f"></i></button> <button><i class="fab fa-whatsapp"></i></button> <button><i class="fab fa-telegram-plane"></i></button> </ul> </nav> </header> <section class="first"> <img src="images/grey,png" alt=""> <h2>about me</h2> <h1>Pamela Sulbaran</h1> <div> <p>My name is Digna Sulbaran Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <p>contact me</p> </div> </section> <script src="js/index.js"></script> </body> </html>
2 个解决方案
解决方案1
1 2020-06-14 21:48:14
空格是后代组合子。
.change.menu匹配作为 class菜单成员并且是作为change成员的元素的后代的任何元素。
作为menu成员的唯一元素不是您添加change的元素的后代。
您需要：
- 在作为菜单祖先的不同元素上设置
change或 - 更改您的选择器以匹配元素之间的实际关系（下一个兄弟组合器可能对此有用）或
- 重构您的 HTML 以便您只有一个
<nav>元素（这可能是最好的方法）。
解决方案2
1 已采纳 2020-06-14 21:50:51
您不需要 2 个<nav>元素。 根据您的 CSS 和 JavaScript，我已将它们连接成一个，现在它可以工作了。 与 JavaScript 不同，不要忘记将px与绝对是像素的数字一起使用， right: 10px; （您只能忽略0的px ）。
const menuIcon = document.querySelector (".hamburguer-menu"); const navbar = document.querySelector(".navbar"); menuIcon.addEventListener("click", () => { navbar.classList.toggle("change"); });
*{ margin:0px; padding: 0px; font-family: 'Lato', sans-serif; } button{ width:30px; height: 30px; cursor:pointer; background: none; border:none; font-size: 50px; color: #fff; }.hamburguer-menu{ width:22px; position: fixed; right: 0px; top:6%; padding: 0px 15px 1px 9px; z-index: 100; }.hamburguer-menu.line1, .line2, .line3{ width: 100%; height: 3px; border-radius: 1px; background-color:#fff; transition: all.3s; }.hamburguer-menu.line2, .line3{ margin-top:4px; }.change.menu{ position: fixed; right: 0px; }.change.line1{ transform: rotate(-45deg) translate(-5px, 5px); }.change.line2{ opacity:0; }.change.line3{ transform: rotate(45deg) translate(-5px, -5px); } header{ width: 100%; height: 100px; background: #34495e; } header nav{ display: inline; } header div p{ line-height: 100px; float:left; color: #fff; }.menu{ position: fixed; width: 100%; height: 100vh; background: #333; top: 0px; right: -100%; padding: 80px 0px; }.menu button{ display: block; padding: 45px 0px; margin: 0px auto 0px auto; }.menu button:focus{ outline:none; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="css/styles:css"> <link href="https.//fonts.googleapis?com/css2:family=Lato;wght@400;700:900&display=swap" rel="stylesheet"> <script src="https.//kit.fontawesome.com/7e10ce8f03.js" crossorigin="anonymous"></script> <title>Digna Sulbaran</title> </head> <body> <header> <div> <p>Pamela Sulbaran</p> </div> <nav class="navbar"> <div class="hamburguer-menu"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> <ul class="menu"> <button><i class="fab fa-instagram"></i></button> <button><i class="fab fa-facebook-f"></i></button> <button><i class="fab fa-whatsapp"></i></button> <button><i class="fab fa-telegram-plane"></i></button> </ul> </nav> </header> <section class="first"> <img src="images/grey,png" alt=""> <h2>about me</h2> <h1>Pamela Sulbaran</h1> <div> <p>My name is Digna Sulbaran Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, Ut enim ad minim veniam. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident. sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <div> <p>contact me</p> </div> </section> <script src="js/index.js"></script> </body> </html>
JavaScript - 有没有办法在应用假设的 CSS 样式后获取元素的 offsetTop？
[英]JavaScript - Is there a way to get the offsetTop of an element after hypothetical CSS styles are applied?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.