Question

我正在尝试使用JS（ No jQuery）

使用另一个元素的高度（elementOne）修改元素高度（elementTwo）

当我尝试记录elementOne.style.height时，我得到一个空字符串使用Safari和Chrome检查器，我可以看到计算出的高度，但无法使用JS访问它。它显示为褪色（见截图）

Screenshot of Safari inspector | Screenshot of Chrome inspector

.elementOne {
  min-height: 100vh;
  width:100%;
}

ElementOne的最小高度设置为100vh，但会根据子元素的设备/大小自动增加。它没有高度设置。 ElementTwo默认没有任何css

我试图只使用JS和根本不想使用jQuery 。

Answer 1

如果您想要元素的高度样式，则需要在旧IE上使用getComputedStyle（或currentStyle获取计算样式）：

function getStyle(element) {
    if (typeof getComputedStyle !== "undefined") {
        return getComputedStyle(element);
    }
    return element.currentStyle; // Old IE
}

var heightStyle = getStyle(element).height;

这将是一个字符串，上面有单位（不一定是CSS中的单位）。

如果您想要元素 height 而不是height 样式，请使用element.offsetHeight或{{3} }。他们将是数字;它是四舍五入到最接近的整数的像素数。

如果您想获得最精确的信息（包括相关的小数像素;可能发生），您可以使用element.clientHeight。

示例：

＆＃13;

function getStyle(element) {
  if (typeof getComputedStyle !== "undefined") {
    return getComputedStyle(element);
  }
  return element.currentStyle; // Old IE
}
var element = document.querySelector(".foo");
var bounding = element.getBoundingClientRect();
console.log({
    "height style": getStyle(element).height,
    "offsetHeight": element.offsetHeight,
    "clientHeight": element.clientHeight,
    "bounding height": bounding.height
});

＆＃13;

.container {
  display: inline-block;
  width: 100px;
  height: 200px;
  position: relative;
  background-color: yellow;
}
.foo {
  display: inline-block;
  width: 100%;
  height: 33.3%;
  background-color: blue;
}

＆＃13;

<div class="container">
  <div class="foo"></div>
</div>

＆＃13;

Answer 2

我认为你想使用dom-element的属性.clientHeight。 See the mdn arcticle about it

无法在JS中访问元素的style.height

2 个答案: