如何使用原生JavaScript获取skew变换元素的实际渲染外高度

getComputedStyle返回的是元素的原始布局尺寸，CSS transform属于视觉层变换，不会改变元素在文档流中的布局占位，因此变换带来的视觉尺寸变化不会被getComputedStyle统计。

方法1：使用getBoundingClientRect()（推荐） #

这是最简单也最通用的方案，该API返回元素在视口中实际渲染的边界矩形，会自动计算所有transform、缩放、旋转、倾斜带来的尺寸变化，直接返回最终的渲染尺寸。
示例代码：

const skewedEle = document.querySelector('.your-skewed-element')
// 获取元素实际渲染边界
const renderRect = skewedEle.getBoundingClientRect()
// 真实渲染高度
const realHeight = renderRect.height
// 同时也可以拿到真实渲染宽度、距离视口的偏移等参数
const realWidth = renderRect.width

该方法会直接返回你提到的约700px的实际高度，无需手动计算变换参数。

方法2：手动通过变换矩阵计算 #

如果需要脱离DOM调用做预计算，可以通过变换参数手动推导最终高度，以skewY(θ)为例：

• 倾斜角度θ的单位为角度，需要先转换为弧度
• 变换后的垂直高度 = 原始高度 / |cos(θ)|
  示例代码：

// 原始高度，可通过getComputedStyle获取
const originalHeight = 600
// skewY的倾斜角度，这里是-10deg
const skewYAngle = -10
// 角度转弧度
const radian = Math.abs(skewYAngle * Math.PI / 180)
// 计算真实高度
const realHeight = originalHeight / Math.cos(radian)

注意事项 #

• 如果元素存在overflow: hidden的父级裁剪容器，getBoundingClientRect()返回的是元素本身的完整渲染尺寸，而非被裁剪后的可见高度
• 如果元素应用了多层复合变换（同时有倾斜、旋转、缩放），优先使用getBoundingClientRect()，避免手动计算矩阵出错

内容的提问来源于stack exchange，提问作者Mark Howells-Mead