Question

我可以使用

在jQuery中获得高度

$(item).outerHeight(true);

但我如何使用JS？

我可以用

获得li的高度

document.getElementById(item).offsetHeight

但是当我尝试使用margin-top时，我总会得到“”：

document.getElementById(item).style.marginTop

Answer 1

style对象上的属性只是直接应用于元素的样式（例如，通过style属性或代码）。所以.style.marginTop如果你有特别指定给那个元素的东西（不是通过样式表等分配的话），它只会包含一些东西。

要获取当前计算的对象样式，可以使用currentStyle属性（Microsoft）或getComputedStyle函数（几乎所有其他人）。

示例：

var p = document.getElementById("target");
var style = p.currentStyle || window.getComputedStyle(p);

display("Current marginTop: " + style.marginTop);

公平警告：你得到的可能不是像素。例如，如果我在IE9中的p元素上运行上述内容，则会返回"1em"。

Live Copy | Source

Answer 2

当我在这个问题上寻找答案时，我在这个网站上发现了一些非常有用的东西。您可以在TestDbCrud.java查看。帮助我的部分如下：

{{1}}

Answer 3

此外，您可以为HTML元素创建自己的outerHeight。我不知道它是否适用于IE，但它适用于Chrome。也许，您可以使用上面的答案中建议的currentStyle来增强下面的代码。

Object.defineProperty(Element.prototype, 'outerHeight', {
    'get': function(){
        var height = this.clientHeight;
        var computedStyle = window.getComputedStyle(this); 
        height += parseInt(computedStyle.marginTop, 10);
        height += parseInt(computedStyle.marginBottom, 10);
        height += parseInt(computedStyle.borderTopWidth, 10);
        height += parseInt(computedStyle.borderBottomWidth, 10);
        return height;
    }
});

这段代码允许你做这样的事情：

document.getElementById('foo').outerHeight

主要浏览器（IE，Chrome，Firefox）支持caniuse.com, getComputedStyle。

Answer 4

这是我的解决方案：

第一步：选择元素

第 2 步：使用 getComputedStyle 并为其提供元素

第 3 步：现在访问所有属性

const item = document.getElementbyId('your-element-id');
const style= getComputedStyle(item);
const itemTopmargin = style.marginTop;
console.log(itemTopmargin)

它会为您提供 px 单位的边距，例如您可能不想要的“16px”。您可以使用 parseInt()

提取值

const marginTopNumber = parseInt(itemTopmargin)
console.log(marginTopNumber)

它只会给你数值（没有任何单位）。

如何在纯JavaScript中获取div的边距值？

4 个答案: