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

Question

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

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

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

使用 getComputedStyle 给出一个单位值。

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

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

Return "auto"
or 
Return "80%"

2011 年有一篇关于浏览样式表的旧帖子，但从那时起浏览器有了显着的发展。当然，目前一定有更好的方法吗？

例如，Chrome 的计算属性检查器将在计算出的 px 值下方列出样式属性（如果属性是通过 CSS 设置的，则会有一个小下拉箭头）。它通过以下答案中的 calculateStyleMap()实现这一点，但并非所有浏览器都实现了它。

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

Answer 1

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