问题标签 [offsetheight]

我需要知道渲染元素的高度。我不在乎元素是否报告它或父项是否检测到高度。

我一直在研究这个问题，我的第一个根本原因是 :host 元素必须有它的display:block集合，我已经做到了。（我做得对吗？）

this.nativeElement将重要信息转储到 console.log 但是当我尝试以编程方式访问该值时，它出现“0”。

文件：

img-fader.component.html

img-fader.component.css

img-fader.component.ts（重要部分）

我正在使用 Webview 将一些内容呈现到视图中，以计算内容的高度我使用脚本来获取内容的高度，span 标签包含内容。

这是 webview 组件：

所以结果，我在 Android 中运行时看到空格（脚本返回高度的两倍）和 iOS 上的剪辑内容（返回的高度小于内容高度）。

我尝试使用其他 autoHeight webview 组件，例如（react-native-webview-autoheight），但对于 iOS 和 Android 仍然显示几乎相同的结果。

我正在尝试解决这个问题，但无法解决这个问题。任何帮助，将不胜感激。

没有真正的官方 JavaScript 文档，但让我们看一下：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

关于 HTMLElement.offsetHeight 他们说：

通常，元素的 offsetHeight 是以像素为单位的元素 CSS 高度的度量，包括边框、填充和元素的水平滚动条（如果存在，如果呈现）。

我知道 offsetHeight 的值在不同的浏览器中可能会有所不同，但这不是我的意思。我的观点是：

如果呈现

我做了一些测试，但我认为这是错误的和不正确的。在我看来，它必须是：“如果解析”而不是“如果呈现”。在互联网上，我看到很多人混淆了这些术语，而我认为它们是两个不同的东西。

渲染 = 在浏览器
解析中显示内容 = 构建 DOM 树

看这个测试：

5 秒后在 Chrome 中显示：
Container offsetHeight is 180 px
后跟 html 代码行

5秒后在firefox中：
Container offsetHeight is 200 px
后跟html代码行

文档说它只会测量如果渲染的高度。但是当开始执行 5 秒的 javascript 延迟时，浏览器还没有在屏幕上显示任何内容。所以 HTMLElement 还没有被渲染！解析相同的 html 已经完成，因为“解析 html”和“执行 javascript”具有同步行为。

因此，如果我不得不相信文档，我希望 offsetHeight 为空或为零。我犯了一些错误还是文档确实不正确？

ps可能是“如果存在，如果渲染”仅指水平滚动条，但我做了一些其他测试，如果有滚动条，它将在浏览器在屏幕上显示任何内容之前（渲染之前）进行计算。因此，在这种情况下，我们将有与上述相同的故事。

ps 也许它看起来像一个不重要的细节，但我在互联网上的任何地方都可以使用 offsetHeight 来测量屏幕上显示的元素的高度。所以我想我可以用它来跟踪浏览器的渲染过程。但是当元素仍在渲染时，offsetHeight 的值已经是我完成渲染后的值。

目前正在做一个 React 项目，使用 webpack、webpack-dev-server、热模块重载、React Router、styled-components 等

我创建了一个 Table 组件，我尝试根据父级的高度动态确定要在 Table 中呈现的行数。在 Chrome 中，这可以按预期工作，但在 Firefox 中，我发现我的所有行都被渲染，因此没有绑定在父组件中。

这是一个已知问题，还是有任何建议的解决方法，或者我的代码有什么可怕的错误？

父组件（App）：

表格组件：

提前致谢！

cannot read property 'offsetHeight' of null当我刚刚初始化它的高度时，我得到了这个。

这是我的代码：

我正在尝试获取元素的 offsetHeight，但我没有定义。

有了这个，我得到了 html 集合，一切正常：

但如果我添加.offsetHeight我得到未定义。

怎么了？

我试图根据最高的一张来匹配每张幻灯片的高度。我看到我可以使用“offsetHeight”，但那是代码加载时的一组高度。我想在窗口/外部 div 更改时使其可修复（我使用 flexbox 作为外部）

我想做一件简单的事情：我有一个两个滚动的网站，当滚动在右侧部分达到最大值时，我想隐藏右侧部分。所以我用

但是当卷轴在左侧达到最大值时，右侧部分被隐藏。我能怎么做 ？

有精确问题的代码笔： https ://codepen.io/marie-fran-oise-talbot/pen/LKeqBE

谢谢你

我想让我的 Web 应用程序中的所有网页都与最新的 IE=Edge 兼容。因此，我使用 IE 开发人员工具模拟了我的应用程序，并遇到了很多损坏的 CSS。

我知道当我们将网页从怪癖模式移动到标准模式时，这很常见。但是，在调试 js 代码时，我开始了解元素在 IE5 和 IE 边缘分别返回不同的偏移值（偏移宽度和偏移高度）。

例如-IE=5

IE=边缘

当我将我的应用程序模拟到 IE Edge 时，我需要获得相同的结果。请让我知道这种行为的原因以及克服相同问题的更好解决方案。如果可能，请建议一种在两个 IE 版本中获取相同偏移值的方法。

我对 JavaScript 比较陌生，在过去几周里花了很多时间在日期和时间教程上，但是对于我的抽象时钟项目，只有一件事我根本无法弄清楚：让我的 div 的 offsetHeight 同步到当前时间以秒为单位。

我希望时钟显示当前时间（给或花几分钟，时间在 .paragraphs 中以 15 分钟为增量）。

我有#time，我希望通过 offsetHeight 向上滚动，将当前时间放在这个小窗口中。时间以 15 分钟为增量，因此准确性不是这里的目标，但无论我何时打开页面，我都会看到“午夜”并从那里开始向上滚动。

我已经尝试为关键帧 * 百分比添加延迟，但我似乎仍然无法弄清楚。我也尝试过让#progress 推高#time，但这对我也不起作用。

这是我的代码：

https://jsfiddle.net/mbgtcLs6/2/

任何帮助将非常感激。提前致谢！

的HTML：