繁体   English   中英

没有指定类时获取div的高度

Getting height of div when it does not have a specified class

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

构建,我在我的 javascript(普通 javascript)中遇到了一个问题。 我有一个固定的导航栏,当用户向下滚动时它会缩小。 我不使用粘性元素,因为它们在某些计算机上遇到困难。 当用户向下滚动时,这个类被添加到导航栏。

.sticky {
    position: fixed;
    padding: 10px 5% 10px 5%;
    background-image: linear-gradient(rgb(0, 0, 0),rgb(0, 0, 0));
}

由于这个导航栏从来都不是相对的,我在正文中的第二个元素的顶部添加了一个边距。 像这样:

var mainNav = document.querySelector(".header-nav");
var tmp = document.getElementsByTagName('HEADER')[0];

tmp.nextElementSibling.style.marginTop = mainNav.offsetHeight + "px";

window.addEventListener("resize", function(event) {
    tmp.nextElementSibling.style.marginTop = mainNav.offsetHeight + "px";
})

我遇到的问题涉及我使用的调整大小功能,因为标题需要根据浏览器大小更改高度。 现在,如果我在页面顶部调整页面大小,当标题未缩小(例如 150 像素)时,一切正常。 但是,如果我在导航栏较小时滚动到页面中间,比如说 70 像素高,那么当我向上滚动时,第二个元素的 marginTop 只有 70px 而当导航栏再次增长时我需要它是 150px . 希望这能让我的问题清楚。 我想知道是否有办法将 mainNav.offsetHeight 作为像 mainNav(without .sticky class).offsetHeight 这样的值

1 个回复

从问题:

我想知道是否有办法将mainNav.offsetHeight作为像mainNav(without .sticky class).offsetHeight这样的值

问题是如何确定标题的默认(无 .sticky)和 .sticky 高度。

这是一个技巧:

A.克隆标题并使克隆不可见,

B. 在真实头部之后添加克隆头部,

C. 确定克隆标题的默认和.sticky高度,

D. 从 DOM 中删除克隆的标头,

E. 返回默认和.sticky偏移高度。

 function getHeaderHeights() { const hdr = document.querySelector('.header-nav'); const hdrClone = hdr.cloneNode(true); hdrClone.style.opacity = 0; hdr.insertAdjacentElement('afterend', hdrClone); const defaultHeight = hdrClone.offsetHeight; hdrClone.classList.add('sticky'); const stickyHeight = hdrClone.offsetHeight; hdrClone.remove(); return { defaultHeight, stickyHeight }; } const { defaultHeight, stickyHeight } = getHeaderHeights(); console.log(`Header ht: ${defaultHeight}, stickyHt: ${stickyHeight}`);
 .header-nav { background-color: #a0a0a0; padding: 40px 5%; color: white; width: 100%; } .sticky { position: fixed; padding: 10px 5% 10px 5%; background-image: linear-gradient(rgb(0, 0, 0), rgb(0, 0, 0)); }
 <header class="header-nav"> This is a sample header.<br> It has two lines of text. </header>

1 如何强制DIV具有指定百分比的高度?

我有这个HTML :(我希望标题占屏幕高度的15%)。直到.header div的整个DOM树都用高度百分比定义。 但是标题div高度只包装它的内容,小于屏幕的15%。 CSS是: ...

2
即使 html、body 和 div 设置为 height=100%,高度也不会填满整个页面

我现在正在构建一个致敬页面。 我一直在设置 html、body 和 height=100%,但是当我检查它时,只有 HTML 和 body 标签高度填充了浏览器的整个页面,而 div 元素没有。 我认为这会使我的时间线内容溢出。 我能知道我该如何解决吗? 另外,页面没有响应,我能知道我该如何解决这 ...

2021-01-19 04:24:58 1 82   html/ css
4 为什么我的div没有高度?

我试图模仿twitter的bootstrap css框架使用的行列机制。 我有一个div包含一些其他div本身包含来自内容。 在我的元素检查器中,它将容器显示为没有高度。 div的高度不应该是它包含的元素的高度吗? 这是一个jsfiddle: 有问题的HTML / CSS ...

6 在textarea上应用0高度div的类

在我的设计中,我有一个高度为0的div(它的高度将通过一些锚点击上的一些JS代码增加)和一个文本框。 HTML是: 和以下CSS: 上面代码的实时JS小提琴是http://jsfiddle.net/VHsKc/1/ 。 我的问题是,当我悬停文本框时,我看到手形光标在它上面。 ...

7 获取未在源中指定宽度和高度的图像的图像尺寸

我想获取未在HTML源代码中指定其width和height标签的图像的高度和宽度。 即 我要做的是在加载图像之前获取图像的宽度和高度。 我正在尝试完成以下任务,如果您知道更好的解决方案,请提出建议。 我想要这样做是因为我想将网站中的所有图像都保留为小于或等于600像素。 ...

9 使用AJAX刷新时,div的高度错误

当用户发表评论时,我有一个通过Ajax更新的评论框。 另外,该列表是可扩展的,通常使用jQuery动画扩展/折叠。 简短的结构示例: 因此,现在我通过Ajax刷新列表,并且php返回新的HTML代码。 用“ html”写入div ... ...但是尝试检索div的新高度 ...

10 在jQuery中加载时图像未达到Div高度

我正在使用jQuery创建具有不同高度图像的图像网格。 HTML中有4列 ,我需要将每个上传的图片排列到最小高度列。 因此,我可以期待页面的外观平衡。 为此,我编写了以下实时代码,但未按预期工作。 当我添加图像时,图像不会转到正确的列(最小高度列)。 $(document ...

暂无
暂无

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

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