67

我可以在 jQuery 中使用

$(item).outerHeight(true);

但是我如何使用 JS？

我可以得到 li 的高度

document.getElementById(item).offsetHeight

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

document.getElementById(item).style.marginTop
4

4 回答 4

138

对象上的属性style只是直接应用于元素的样式（例如，通过style属性或在代码中）。因此.style.marginTop，只有在您有专门分配给该元素的东西（不是通过样式表等分配）时，才会有一些东西。

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

例子：

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

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

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

实时复制| 来源

于 2013-01-11T09:41:57.250 回答
10

outerHeight此外，您可以为 HTML 元素创建自己的元素。我不知道它是否适用于 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

根据caniuse.com 的说法，主要浏览器（IE、Chrome、Firefox）都支持 getComputedStyle。

于 2014-08-07T20:08:04.357 回答
9

当我在寻找这个问题的答案时，我在这个网站上发现了一些非常有用的东西。您可以在http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html 查看。帮助我的部分如下：

/***
 * get live runtime value of an element's css style
 *   http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
 *     note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
 ***/
var getStyle = function(e, styleName) {
  var styleValue = "";
  if (document.defaultView && document.defaultView.getComputedStyle) {
    styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
  } else if (e.currentStyle) {
    styleName = styleName.replace(/\-(\w)/g, function(strMatch, p1) {
      return p1.toUpperCase();
    });
    styleValue = e.currentStyle[styleName];
  }
  return styleValue;
}
////////////////////////////////////
var e = document.getElementById('yourElement');
var marLeft = getStyle(e, 'margin-left');
console.log(marLeft);    // 10px
#yourElement {
  margin-left: 10px;
}
<div id="yourElement"></div>

于 2015-11-03T12:37:46.233 回答
5

这是我的解决方案：

第 1 步：选择元素

第 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)

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

于 2021-06-20T14:09:52.560 回答