4

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

$("#content").height()

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

4

3 回答 3

16

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

document.getElementById('content').clientHeight;

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

document.getElementById('content').style.height;
于 2013-09-05T21:28:48.310 回答
0
var content = document.getElementById("content");
content.clientHeight;
于 2013-09-05T21:29:13.437 回答
0

正如评论中所述,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;
}
于 2019-12-08T08:31:31.903 回答