如何获取已加载元素高度并为其设置对应margin-top CSS规则

以下提供原生JavaScript和jQuery两种可直接使用的代码片段：

原生JavaScript版本 #

// 等待页面所有资源加载完成后执行，确保元素高度计算准确
window.addEventListener('load', function() {
  // 选中所有带目标类名的元素
  const targetElements = document.querySelectorAll('.margin-top-auto');
  targetElements.forEach(function(el) {
    // 获取元素高度（clientHeight包含内边距，不含边框、外边距，需要包含边框可替换为offsetHeight）
    const elementHeight = el.clientHeight;
    // 给元素设置行内margin-top样式
    el.style.marginTop = `${elementHeight}px`;
  });
});

提示：如果元素高度仅由DOM结构决定，不需要等待图片、字体等外部资源加载，可以将window.addEventListener('load', ...)替换为document.addEventListener('DOMContentLoaded', ...)，代码执行时机更早。

jQuery版本 #

// 页面所有资源加载完成后执行
$(window).on('load', function() {
  $('.margin-top-auto').each(function() {
    // 获取元素高度，对应原生clientHeight，需要包含边框可使用outerHeight()
    const elementHeight = $(this).height();
    $(this).css('margin-top', elementHeight + 'px');
  });
});

提示：如果不需要等待外部资源加载，可替换为$(document).ready(function() { ... })写法。

注意事项 #

• 如果目标元素存在display: none的隐藏状态，获取到的高度会为0，需要先将元素临时设为可见后再计算高度，计算完成后再还原原始状态即可。

内容的提问来源于stack exchange，提问作者Briany Hearne