javascript - 如何使用 JavaScript 获取 CSS 属性的计算值(或指定值)(不是解析值或使用值)？

Question

我正在寻找例如。 “宽度:最小内容”不是“宽度:210px”或“绿色”而不是“rgb(0,255,0)”。所以 $(elem).css("width") 不是我要搜索的内容。

我从 MDN 中获取命名(指定的或计算的)

The specified value of a CSS property is the value it receives from the document's style sheet. The specified value for a given property is determined according to the following rules: ...

The computed value of a CSS property is the value that is transferred from parent to child during inheritance. It is calculated from the specified value by: ...

对比:

The resolved value of a CSS property is the value returned by getComputedStyle().

For most properties, it is the computed value, but for a few legacy properties (including width and height), it is instead the used value.

The used value of a CSS property is its value after all calculations have been performed on the computed value.

一个原因是，我过度使用一些布局(几乎)只有隐式尺寸，如果我错过了 CSS 文件中的显式宽度，我会警告自己。

另一个是，我想帮助网格显示可变数量的元素，以根据可用空间以更“方形”的方式放置它。因此，我需要知道网格项的规范是最小内容还是最大内容。

编辑:遍历样式表不是解决方案——这意味着对 CSS 的整个继承进行编程...

Answer 1

我认为您错过了 css 变量 => https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties

const Root     = document.documentElement
    , gRoot    = getComputedStyle(Root)
    , cssVname = '--min-content'
    , myInput  = document.querySelector('#my-input')

var  currentVal = parseInt( gRoot.getPropertyValue(cssVname) )

myInput.value = currentVal

myInput.oninput =_=>
  {
  currentVal = myInput.valueAsNumber
  Root.style.setProperty(cssVname, `${currentVal}px`)
  }

:root {
  --min-content: 210px;
}

div {
  height: 20px;
  width: var(--min-content);
  background-color : rgb(27, 117, 90);
  margin: 20px;
}

<div></div>

<input id="my-input" type="number" min="100" max="300" step="10" value="210">

您还可以使用主题 => How to over ride css prefers-color-scheme setting