关于前端:通过JavaScript获取刘海屏安全区域高度的方式

在 css 中，能够通过 env() 函数读取平安区域标准定义的边界间隔值，比方：

margin-top: env(safe-area-inset-top);

但这个办法只能用于 css 中，JavaScript 是无奈间接读取 env 函数的。

想在 JavaScript 中读取 env 函数值，须要应用 css 自定义属性（变量）

首先设置：

:root {--sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

而后能够在 JavaScript 中，通过以下办法，读取到 css 自定义变量

getComputedStyle(document.documentElement).getPropertyValue("--sat")