<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <style> body { color: white; background-color: #1E1B1B; border-color: grey; } .navbar { height: 50px; border-bottom: 2px solid grey; margin-bottom: 10px; display: block; } button.nav-btn { float:right; background-color: transparent; border: 1px solid grey; color: white; padding: 5px 12px; font-size: 30px; cursor: pointer; float: left; } </style> <script> function toggleToolNav() { var dis = document.getElementsByClassName("navbar")[0] alert(dis.style.display) } </script> </head> <body> <div class="navbar"> <button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button> </div> </body> </html>When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.
没有评论:
发表评论