繁体   English   中英

devtools中存在div元素,但在屏幕上不可见

div element present in devtools but not visible on screen

提示:本站收集StackOverFlow近2千万问答,支持中英文搜索,鼠标放在语句上弹窗显示对应的参考中文或英文, 本站还提供   中文繁体   英文版本   中英对照 版本,有任何建议请联系yoyou2525@163.com。

我正在尝试使用W3CSS和纯JavaScript克隆一个网站以供学习。 是我已经创建的东西。 我的问题是,单击小屏幕上的汉堡图标后,ID为#menu的div在屏幕上不可见,但是在切换时,它在chrome和ff的devtools中存在。 我已经检查了css中的很多东西,例如display:z-index:background-color:overflow:等等,甚至尝试用js打印有关计算样式和其他内容的东西,但是没有什么导致我找到任何解决方案。 当我用铬检查手机上的上述笔时,切换按钮(带有汉堡图标的按钮)未位于菜单栏的中间,并且单击它以打开下拉菜单时,第一个菜单项变为可见(实际上是<a>元素的顶部,恰好适合顶部导航栏)。 我也将在此处发布完整的html && css && js代码,此为令人讨厌的红色感叹号。

html

 function toggleMenu() { let toggler = document.getElementById('menu-toggler'); let menu = document.getElementById(toggler.dataset.menu); if (hasClass(menu, 'w3-hide-small')) { rmClass(menu, 'w3-hide-small'); console.log(window.getComputedStyle(menu).backgroundColor); let children = menu.childNodes; let height = 0; for (let child of children) { if (child instanceof Element) { height += child.offsetHeight; } } menu.style.height = height + 'px'; } else { menu.style.height = ''; // 500 is the length of the transition window.setTimeout(() => { addClass(menu, 'w3-hide-small'); }, 500); } } function hasClass(elem, cl) { if (elem.className.includes(cl)) { return true; } return false; } function addClass(elem, cl) { if (!hasClass(elem, cl)) { elem.className += ' ' + cl; } } function rmClass(elem, cl) { if (hasClass(elem, cl)) { elem.className = elem.className.replace(' ' + cl, ''); } } 
 .w3-hover-flat-emerald:hover { color: #fff; background-color: #2ecc71 !important; } nav { height: 80px; } nav .w3-hide-small a { height: 80px; line-height: 64px; } nav .w3-hide-small a:hover { color: #2ecc71 !important; background-color: transparent !important; } nav img { height: 80px; } nav .w3-content { position: relative; } nav button { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } #menu { transition: height 0.5s linear 0.1s; overflow: hidden; } @media screen and (max-width: 600px) { #menu { height: 0; } nav .w3-hide-small a { height: auto; } } 
 <!doctype html> <html> <head> <title>copy_lesson</title> <meta name="viewport" content="width=device-width, intial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-camo.css"> <link rel="stylesheet" href="../w3.css/w3-colors-flat.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="style/css/main.css"> </head> <body> <nav class="w3-bar w3-camo-black w3-xlarge"> <div class="w3-content"> <a href="#"> <img class="w3-padding" src="http://www.hhtrans.sk/img/logo.png" alt="logo"> </a> <button onclick="toggleMenu()" id="menu-toggler" data-menu="menu" type="button" class="w3-hover-flat-emerald w3-margin-right w3-button w3-hide-medium w3-hide-large w3-right"> <i class="fas fa-bars"></i> </button> <div id="menu" class="w3-mobile w3-right w3-hide-small w3-large"> <a href="#" class="w3-button w3-bar-item w3-mobile">Home</a> <a href="#" class="w3-button w3-bar-item w3-mobile">About</a> <a href="#" class="w3-button w3-bar-item w3-mobile">Contacts</a> </div> </div> </nav> <script src="style/js/main.js"></script> </body> </html> 

任何将不胜感激。 提前致谢 :)

1 个回复

问题在于此.w3-baroverflow: hidden ,您正在那里使用它。 另外,另一件事是,您的字体全为白色,因此在白色背景下,您将看不到任何内容。

  1. <nav>移除w3-bar
  2. #menu添加一些背景色。

片段

 function toggleMenu() { let toggler = document.getElementById('menu-toggler'); let menu = document.getElementById(toggler.dataset.menu); if (hasClass(menu, 'w3-hide-small')) { rmClass(menu, 'w3-hide-small'); console.log(window.getComputedStyle(menu).backgroundColor); let children = menu.childNodes; let height = 0; for (let child of children) { if (child instanceof Element) { height += child.offsetHeight; } } menu.style.height = height + 'px'; } else { menu.style.height = ''; // 500 is the length of the transition window.setTimeout(() => { addClass(menu, 'w3-hide-small'); }, 500); } } function hasClass(elem, cl) { if (elem.className.includes(cl)) { return true; } return false; } function addClass(elem, cl) { if (!hasClass(elem, cl)) { elem.className += ' ' + cl; } } function rmClass(elem, cl) { if (hasClass(elem, cl)) { elem.className = elem.className.replace(' ' + cl, ''); } } 
 .w3-hover-flat-emerald:hover { color: #fff; background-color: #2ecc71 !important; } nav { height: 80px; } nav .w3-hide-small a { height: 80px; line-height: 64px; } nav .w3-hide-small a:hover { color: #2ecc71 !important; background-color: transparent !important; } nav img { height: 80px; } nav .w3-content { position: relative; } nav button { position: absolute; top: 50%; right: 0; transform: translate(0, -50%); } #menu { transition: height 0.5s linear 0.1s; overflow: hidden; } @media screen and (max-width: 600px) { #menu { height: 0; background: #333; } nav .w3-hide-small a { height: auto; } } 
 <!doctype html> <html> <head> <title>copy_lesson</title> <meta name="viewport" content="width=device-width, intial-scale=1"> <meta charset="utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-camo.css"> <link rel="stylesheet" href="../w3.css/w3-colors-flat.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="style/css/main.css"> </head> <body> <nav class="w3-camo-black w3-xlarge"> <div class="w3-content"> <a href="#"> <img class="w3-padding" src="http://www.hhtrans.sk/img/logo.png" alt="logo"> </a> <button onclick="toggleMenu()" id="menu-toggler" data-menu="menu" type="button" class="w3-hover-flat-emerald w3-margin-right w3-button w3-hide-medium w3-hide-large w3-right"> <i class="fas fa-bars"></i> </button> <div id="menu" class="w3-mobile w3-right w3-hide-small w3-large"> <a href="#" class="w3-button w3-bar-item w3-mobile">Home</a> <a href="#" class="w3-button w3-bar-item w3-mobile">About</a> <a href="#" class="w3-button w3-bar-item w3-mobile">Contacts</a> </div> </div> </nav> <script src="style/js/main.js"></script> </body> </html> 

预习

工作中

1 SVG元素在浏览器中呈现但在屏幕上不可见

我正在使用DomSanitizer和SafeHtml将svg代码注入到我的组件中。 我可以在控制台中看到所有元素都在渲染,但是它们在我的屏幕上不可见。 我正在使用DomSanitizer因为我是从数据对象生成代码的。 这是代码生成的元素的示例 将其直接粘贴在&lt;svg&gt;& ...

2 随createElementNS添加的SVG元素在DOM中,但在屏幕上不可见

向大家致敬 首先,我不是JS或一般的Web开发专家。 我的目标是用SVG覆盖图像,以便当您将鼠标悬停在图像的某些部分时,图像会突出显示。 该问题如标题中所述:通过createElementNS()创建的SVG元素存在于DOM中,但在屏幕上不可见。 以下是我创建的相关代码段: (截断的)j ...

3 SVG元素出现在DOM中,但在屏幕上不可见

我尝试使用Vexflow和Raphael.js绘制带有SVG的五线谱,当我加载页面时,SVG元素出现在DOM中,但它们不会出现在屏幕上。 我检查是否有任何CSS规则可以隐藏元素,但没有任何..也检查不同的浏览器,不同的lib版本,没有... 这是出现在DOM中的SVG: 并且 ...

4 div中的元素,但在视图中不可滚动

我使我的应用程序具有移动响应性,因此我为某些CSS添加了@media查询。 我有一个div,其中包含图片和相应名称的列表,但是在视图中它不是从第一张图片开始的。 根据屏幕尺寸,它将从6日/ 7日开始。 任何想法如何解决这一问题? HTML CSS ...

6 使 SVG 图像的元素在 devtools 中不可扫描

我从 SVG 制作了一个标志,它看起来和工作得很好。 唯一的问题是,当我进入开发工具然后使用选择元素工具时,它还将 SVG 图像内部的元素显示为单独的元素,而不是 SVG 是单个元素。 我正在使用嵌入标签,以便加载自定义字体。 有没有办法让 SVG 显示为一个图像而不是多个元素? 谢谢! ...

2021-05-06 20:02:39 0 13   svg
7 当元素/ div在屏幕上不可见时更改css

在我的Vue Web应用程序中,当其中一个元素通过滚动离开屏幕时,我试图更改标头的CSS类。 我正在使用jquery-visible来查找元素是否可见,因为我找不到任何可行的方法。 现在,我有以下HTML代码可以动态更改CSS类: 在我的Vue代码中,我添加了以下方法: ...

8 ImageView 存在,但在显示中不可见

我试图在两个RelativeView's交集上显示ImageView ,但遇到了一些问题。 我添加了ImageView并显示了调整边框,并允许我约束和调整元素的大小,但它不可见。 如果我将ImageView放在RelativeView's其中一个中,那么图像将显示出来,但我不能像我想要Relati ...

9 值存在于浏览器中,但在检查元素中不可用

我正在从网页上抓取元素,并且可以在灰色框中看到网页上该元素可见(数值),但是当尝试检查该元素时,我无法在标签之间找到它。 我以为URL可能是任何Web服务终结点,并尝试从邮递员那里获取,但是它仅返回HTML代码而不是JSON响应。 通常,我们可以通过在硒中找到元素并获取innerText ...

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2022 STACKOOM.COM