如何使用 JavaScript 获取 CSS 属性的计算（或指定）值（不是解析或使用的值）？答案

【问题标题】：How to get the computed (or the specified) value for a CSS property (not the resolved or used value) with JavaScript?如何使用 JavaScript 获取 CSS 属性的计算（或指定）值（不是解析或使用的值）？
【发布时间】：2020-01-03 22:54:50
【问题描述】：

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

我从 MDN 获取命名（指定或计算）

CSS 属性的指定值是值 它从文档的样式表接收。给定属性的指定值根据以下规则确定：...

CSS 属性的 computed 值是传输的值 在继承期间从父级到子级。它是从计算指定值：...

对比：

CSS 属性的解析值是返回的值 getComputedStyle()。

对于大多数属性，它是计算值，但对于少数遗留属性（包括宽度和高度），它是 而不是使用的值。

CSS 属性的使用值是其经过所有计算后的值已对计算值执行。

一个原因是，我过度使用了一些布局以（几乎）仅隐式大小，如果我错过了 CSS 文件中的显式宽度，我会警告自己。

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

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

【问题讨论】：

IRRC，您在 JS 中唯一真正的选择是使用 getComputedStyle() 计算样式（或解析值，如您定义）或元素上的 style 属性。
如何使用 CSS flexbox。你看起来像这样吗https://jsfiddle.net/eptzoqra/
@AndroidNoobie：谢谢，但这不是“我的定义”；我从 MDN 拿来的。经常混淆：developer.mozilla.org/en-US/docs/Web/CSS/resolved_value
是的，我知道，我的意思是使用您提供的定义。
@DeepuReghunath：虽然这只是问题的一个原因：我现在使用 Flex；我想要编程的是一种更智能的传播方式：简而言之：如果不是全部 8 个，则将 2 行 4 个放在一行中。不是 7 和 1。（或 3 行 3/3/2）但这个问题是关于获取指定的 css 值。

标签： javascript css

【解决方案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

【讨论】：