仅使用原生JS为fixed定位头部下方banner设置对应上外边距的方法

方案1：直接通过类名选中.banner元素 #

这是最简便的实现方式，因为banner区块本身有专属类名，直接用querySelector选中即可：

// 获取头部高度
const headerHeight = window.getComputedStyle(document.querySelector('.site-header')).height;
// 直接给banner设置上外边距
document.querySelector('.banner').style.marginTop = headerHeight;

方案2：通过相邻元素关系选中（无需知道后续元素类名） #

如果你的场景里头部后续元素的类名不固定，只需要选中头部紧挨着的下一个元素，直接用nextElementSibling即可，它会自动跳过文本节点、注释节点等非元素类型的节点，不需要手动调用两次nextSibling：

const header = document.querySelector('.site-header');
const headerHeight = window.getComputedStyle(header).height;
header.nextElementSibling.style.marginTop = headerHeight;

补充注意项 #

• 建议把这段代码放在DOMContentLoaded事件回调中，或者放在</body>标签之前执行，避免DOM未渲染完成时取不到元素
• getComputedStyle返回的height本身就带px单位，不需要额外处理，直接赋值给marginTop即可生效

内容的提问来源于stack exchange，提问作者Vinith Almeida