如何使用香草JS确定元素的高度或宽度是否在CSS中设置为100％或“自动”？

Question

如何使用香草JS和跨浏览器解决方案确定元素的CSS宽度/高度设置为“自动”还是“ 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一起获取，返回 100