【早阅】如何仅使用CSS获取任何元素的宽度/高度？

文章预览

作者：@TEMANI AFIF 原文：https://frontendmasters.com/blog/how-to-get-the-width-height-of-any-element-in-only-css/ 背景 在 Web 开发中，获取元素的尺寸通常是 JavaScript 的任务，通过简单的属性如  el.offsetWidth  和  el.offsetHeight  即可实现。然而，CSS 在处理元素尺寸方面相对有限，尽管可以使用  @container  查询来响应元素的特定尺寸，但无法直接获取一个数值用于屏幕显示等操作。 【第3324期】媒体查询与容器查询——该使用哪个以及何时使用？ 要点 本文介绍了一种利用 CSS 的滚动驱动动画（scroll-driven animations）来获取元素尺寸的方法，这种方法虽然有些 hacky，但展示了 CSS 的强大潜力。 分析 滚动驱动动画的原理 滚动驱动动画是 2024 年最受欢迎的新 CSS 特性之一，它允许基于滚动进度而不是时间来驱动动画。通过使用 “视图进度时间线”（view progress timeline），我们可以 ………………………………