JavaScript和jQuery获取元素高度的各种方法

const div = document.getElementById('myDiv');
const height = div.offsetHeight;

console.log(height); // 例如: 200px（数字类型，不带px）

const div = document.getElementById('myDiv');
const height = div.clientHeight;

console.log(height); // 例如: 198px（不含2px边框）

const div = document.getElementById('myDiv');
const height = div.getBoundingClientRect().height;

console.log(height); // 例如: 198.5px（精确值）

const div = document.getElementById('myDiv');
const height = div.scrollHeight;

// 常用于判断内容是否溢出
if (div.scrollHeight > div.clientHeight) {
    console.log('内容溢出了！需要滚动');
}

var h = $('#myDiv').height();
console.log(h); // 200（数字类型）

var h = $('#myDiv').innerHeight();

var h = $('#myDiv').outerHeight();      // 含padding + border
var h = $('#myDiv').outerHeight(true);  // 含padding + border + margin

var h = $('#myDiv').css('height');
console.log(h); // "200px"（字符串类型，带px）

const div = document.getElementById('content');

if (div.scrollHeight > div.clientHeight) {
    console.log('内容溢出，需要滚动条');
    div.style.overflowY = 'auto';
}

function centerVertically() {
    const container = $('#container');
    const child = $('#child');
    
    const containerH = container.height();
    const childH = child.outerHeight();
    
    child.css('margin-top', (containerH - childH) / 2);
}

$(window).resize(function() {
    const windowH = $(window).height();
    const headerH = $('#header').outerHeight();
    
    $('#main').css('height', windowH - headerH - 50);
});

// 原生JS
const viewportHeight = window.innerHeight;

// jQuery
const viewportHeight = $(window).height();

// 方案1：放在DOM ready中
$(document).ready(function() {
    var h = $('#myDiv').height();
});

// 方案2：图片加载完成后获取
$('img').on('load', function() {
    var h = $(this).height();
});

// 使用 offsetHeight 代替
var h = document.getElementById('myDiv').offsetHeight;

// 或 jQuery
var h = $('#myDiv').height();

// 临时显示获取
const div = $('#myDiv');
div.show();
const h = div.height();
div.hide();

// 或使用 scrollHeight（即使隐藏也能获取）
const h = div[0].scrollHeight;