如何通过JS获取CSS calc规则计算后的实际数值而非原始表达式

1. 最简便的获取calc计算后高度的方法 #

直接读取元素的offsetHeight/clientHeight属性，这两个属性返回的都是浏览器完成渲染后的实际像素值，不受CSS中calc、自定义变量、媒体查询的影响：

// jQuery 写法
const postPlaceInitHeight = $('.postPlace')[0].offsetHeight;
// 原生JS写法
const postPlaceInitHeight = document.querySelector('.postPlace').offsetHeight;

你示例中calc规则calc(var(--imgItem-height) * 2 + 5px)的计算结果会直接以数字形式返回，移动端下就是115（55*2+5）。

2. 适配多端的增量高度方案 #

不需要写死300px，直接用获取到的初始高度作为基准按比例设置增量即可，自动适配不同屏幕尺寸：

// 页面加载完成后存储初始高度（确保在CSS加载完成后执行）
const initHeight = $('.postPlace')[0].offsetHeight;
// 可按需求调整增量比例，比如每次增加1.8倍初始高度
const addHeight = initHeight * 1.8;

// 动画代码
$('.postPlace').animate({
  height: `+=${addHeight}`
}, 1500);

3. 如需获取CSS自定义属性的计算值（比如你的--gsh变量） #

之前用getComputedStyle拿到原始表达式是因为直接读取了自定义属性的原始定义，用computedStyleMapAPI可以直接拿到计算后的数值：

const postPlace = document.querySelector('.postPlace');
// 拿到--gsh的计算后数值，单位为px时直接返回数字部分
const gshValue = postPlace.computedStyleMap().get('--gsh').value;

示例中拿到的结果就是27.5，符合55/2的计算结果，完全不需要引入SCSS。

内容的提问来源于stack exchange，提问作者fjunillon