使用VanillaJS添加内联CSS属性和回退值

Question

我试图解决的问题基本上是Safari iOs和Vh计算的问题。

以下是功能：

function overflowHandler() {
const header = document.querySelector('.header-container').getBoundingClientRect().height;
const regionTop = document.querySelector('.region-top').getBoundingClientRect().height;
const totalHeaderHeight = header + regionTop;
if (window.innerWidth < 1080) {
flyout.style.height = 'calc(100vh - ' + totalHeaderHeight + 'px)';
}
}

但我也需要能够传入height: webkit-fill-available作为一种样式，以修复iOS上用户无法完全滚动到导航底部的错误。

我已经尝试过使用element.style.cssText来设置这两个高度属性，但最右边的值就是在浏览器中呈现的值。

我的意思是：

element.style.cssText = 'height: calc(100vh - ' + totalHeaderHeight + 'px); height: -webkit-fill-available;'

将呈现为height: -webkit-fill-available;

我不知道该怎么做，也不知道该如何确保菜单的全高可以在iOS上滚动。

Answer 1

使用element.setAttribute('style', 'height: -webkit-fill-available;')