如何在使用vanilla JS的CSS中将元素的高度或宽度设置为100%或`auto`？

Question

如何使用vanilla JS和跨浏览器解决方案确定元素的CSS宽度/高度是否设置为'auto‘或'100%’？

使用style属性，只返回设置的内联样式。

document.querySelector("#foo").style.height
Returns: ""

使用getComputedStyle会给出一个单位值。

getComputedStyle(document.querySelector("#foo")).height
Returns: "334.641px"

我正在寻找的结果将返回在元素上设置的值

Return "auto"
or 
Return "80%"

有一个关于遍历样式表的old post from 2011，但从那时起，浏览器已经有了很大的发展。当然，目前肯定有更好的方法？

例如，Chrome的计算属性检查器将在计算的px值下面列出样式属性(如果该属性是通过CSS设置的，则会有一个小的下拉箭头)。它通过computedStyleMap() in the following answer实现这一点，但并不是所有的浏览器都实现它。

width: 385px;
100%.  .w-full  tailwinds.css:6366

Answer 1

为了获取元素的值，首先通过css将元素的宽度设置为100%，然后设置元素id并使用js进行get，它返回100