我想在这里创建这样的东西:https://www.amazon.de/Meisterwerke-Weltliteratur-Sammlung-internationaler-Meistererzählungen/dp/3839892716/
如果您使浏览器窗口的宽度变小或变大,您会注意到 authors-element 的后缀(始终为一行)会显示“X-authors hidden - show all”。我如何计算有多少元素/作者超出了作者父元素的范围,这样我就可以通过单击该后缀告诉用户他可以扩展多少?
我使用 angular 4,但如果你知道纯 JS 的解决方案,我也许可以翻译它。
[编辑]:我添加了两个屏幕截图来显示效果,例如“& 16 mehr”和“& 14 mehr”(德语中还有 16 或 14)。
最佳答案
写一个监听窗口调整大小的指令,比如:
@HostListener('window:resize', ['$event'])
onResize(event) {
const elementHeight = event.target.innerHeight;
const parentHeight = window.innerHeight;
const visibleElements = parentHeight / elementHeight;
const hiddenElements = Math.ceil(elementHeight - visibleElements);
console.log(hiddenElements);
}
关于javascript - JS/Angular - 找出父元素的宽度/高度内有多少 html 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44991036/