0

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

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

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

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

与：

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

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

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

一个原因是，我将一些布局过度工作到（几乎）只有隐式大小，如果我错过了 CSS 文件中的显式宽度，我会警告自己。

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

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

4

1 回答 1

0

我认为您错过了 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">

您还可以使用主题 =>如何覆盖 css 首选颜色方案设置

于 2019-08-30T18:01:18.693 回答