gpt4 book ai didi

javascript - 使用 JavaScript 将 margin-top 设置为页面的高度

转载 作者:太空宇宙 更新时间:2023-11-04 05:57:08 26 4
gpt4 key购买 nike

我正在尝试使用 JavaScript 将 div 的顶部边距设置为窗口高度减去 220 像素。我希望这个值在窗口大小改变时改变。

这是我目前拥有的:

HTML

<body onresize="heroHeight()" onload="heroHeight()">
<div class="heroImage"></div>
<div class="content">
<!-- page content -->
</div>
</body>

CSS

.content {
margin-top: 0;
width: 100%;
}

最后是我的 JavaScript:

function heroHeight() {
var heroCurHeight = document.getElementsByClassName("content")[0];
heroCurHeight.style.marginTop = (window.outerHeight - 220);
}

知道我做错了什么吗?

谢谢!

最佳答案

CSS 动态边距

当你可以在 CSS 中做同样的事情时,用 JS 做起来似乎过于复杂(假设我不知道你的用例)

.heroImage {
margin-top: calc(100vh - 220px);
}

CSS vh 是表示视口(viewport)高度的百分比单位。 (当视口(viewport)改变大小时自动更新)

CSS calc() 旨在对多种单位类型进行数学运算。

编辑:

如果您要坚持使用 Javascript...

您确实需要注意性能,并且只有在用户完成调整窗口大小时才运行函数。这称为“去抖动”功能。这是一个 good overview的技术。

关于javascript - 使用 JavaScript 将 margin-top 设置为页面的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57678374/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com