javascript - 如何在纯 JavaScript 中编写 $("#content").height()？

Question

在我的新项目中，我必须在没有 jQuery 的情况下做一些内容。如何用纯 JavaScript 编写下面的 jQuery 代码？

$("#content").height()

当然，那$("#content")是在 JS 中var content = document.getElementById('content');，但这.height()对我来说是个大问题。请帮忙

Answer 1

等于$('#content').height()将是：

document.getElementById('content').clientHeight;

或等于$('#content').css('height')

document.getElementById('content').style.height;

Answer 2

var content = document.getElementById("content");
content.clientHeight;

Answer 3

正如评论中所述，adeno 的解决方案是不正确的，因为它会将不需要的填充因素考虑到高度中。

要获得与 jQuery 提供的相同维度.height()，这是您要使用的代码。

const s = window.getComputedStyle(el, null),
height = el.clientHeight - parseInt(s.getPropertyValue('padding-top')) - parseInt(s.getPropertyValue('padding-bottom'));

这是一个有助于计算 jQuery 的所有高度 getter 函数的函数。如果您想计算宽度，您只需更改代码中的一些明显属性

function getHeight(el, type) {
    if (type === 'inner')  // .innerWidth()
        return el.clientHeight;
    else if (type === 'outer')  // .outerWidth()
        return el.offsetHeight;
    const s = window.getComputedStyle(el, null);
    if (type === 'height' || !type)  // .height()
        return el.clientHeight - parseInt(s.getPropertyValue('padding-top')) - parseInt(s.getPropertyValue('padding-bottom'));
    else if (type === 'full')  // .outerWidth( includeMargins = true )
        return el.offsetHeight + parseInt(s.getPropertyValue('margin-top')) + parseInt(s.getPropertyValue('margin-bottom'));
    return null;
}