javascript - 为一个 CSS 属性设置多个值

是否可以为 CSS ID 的单个属性设置两个值，例如

高度：12em；高度：12rem；

对于单个 id？我知道可以用 CSS 实现，但我想通过 JavaScript 改变高度，并在一个属性上同时拥有两个值，以便 'em' 作为不支持 'rem' 的浏览器的回退。

示例：

function updateHeight() {
  var testElem = document.getElementById("testId");
  testElem.style.height = "12em";
  testElem.style.height = "12rem";
  //testElem.style.height = "12em; 12rem;"; doesn't work, applies "12em"
}

#testId {
  height: 8em;
  height: 8rem;
  background-color: black;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="testId">
    BlaBla
  </div>
  <button onclick="updateHeight()">Bla</button>
</body>

</html>

答案＃1

你可以改用类

function updateHeight() {
  var testElem = document.getElementById("testId");
  testElem.classList.add('high');
}

#testId {
  height: 8em;
  height: 8rem;
  background-color: black;
  color: white;
}

#testId.high { /* remember that ID is more specific than class */
  height: 12em;
  height: 12rem;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="testId">
    BlaBla
  </div>
  <button onclick="updateHeight()">Bla</button>
</body>

</html>

或者，如果值是动态的，你可能需要插入一个 style 标签才能支持 CSS 层叠

function updateHeight() {

  var value    = 12; // or something dynamic
  var styles   = '#testId {height: '+value+'em; height: '+value+'rem;}';
  var tag      = document.createElement('style');

  tag.innerHTML = styles;

  document.querySelector('head').appendChild(tag);

}

#testId {
  height: 8em;
  height: 8rem;
  background-color: black;
  color: white;
}

<!DOCTYPE html>
<html>

<head>
  <title>Test</title>
  <meta charset="utf-8" />
</head>

<body>
  <div id="testId">
    BlaBla
  </div>
  <button onclick="updateHeight()">Bla</button>
</body>

</html>

答案＃2

是的，你可以。这是由 CSS 层叠定义的：

应用于元素的每个属性声明都会为该元素的该属性贡献一个 声明值。
然后这些数值会被级联处理，以选择一个“获胜值”。
级联值表示级联的结果：它是获胜于级联的声明值（在级联输出中排序最靠前）。

那么，如果你使用

height: 8em;
height: 8rem;

属性 height 将有 2 个声明值：8em 和 8rem。后者将覆盖前者，成为级联值。

如果某些浏览器不支持其中一个，则另一个将是唯一声明的值，因此它将在层叠中胜出。

如果某些浏览器不支持它们中的任何一个，级联的输出将是空列表，并且不会有任何级联值。指定的值将是默认处理的结果（在这种情况下是初始值，因为height不是继承属性）。

然而，使用 JavaScript 会有一个问题。setProperty，在 .style 中由驼峰式 IDL 属性在底层使用，会使用设置 CSS 声明算法，这会覆盖现有的声明：

如果 property 与 declarations 中某个 CSS 声明的属性名称大小写匹配，则令 declaration 为该 CSS 声明。
否则，将一个新的 CSS 声明，其属性名为 property，追加到 declarations，并让 declaration 成为该 CSS 声明。

有一些解决方法：

使用 cssText 而不是驼峰式 IDL 属性：

testElem.style.cssText += "; height: 12em; height: 12rem; ";

设置样式后检查它。如果得到空字符串，说明未被识别。

testElem.style.height = "12rem";
if(!testElem.style.height) testElem.style.height = "12em";

不要在内联样式声明中设置样式。请创建一个新的样式表，或者给元素添加一些类以从现有样式表触发一些 CSS。