Question

是否可以为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>

Answer 1

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

每个属性声明applied to an element都有助于   declared value与该属性关联的cascade   元件。

然后cascaded value处理这些值以选择单个值   “赢得价值”。

the cascade代表declared value的结果：获得级联的是output of the cascade（是   首先在specified）中排序。

然后，如果您使用

height: 8em;
height: 8rem;

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

如果某些浏览器不支持其中一个浏览器，则另一个浏览器将是唯一声明的值，因此它将赢得级联。

如果某些浏览器不支持其中任何一个，则级联的输出将为空列表，并且不会有任何级联值。 defaulting值将是initial value进程的结果（在这种情况下为inherited property，因为height不是setProperty。）

然而，使用JavaScript存在问题。由.style中的驼峰式IDL属性引用的set a CSS declaration使用enable_post_data_reading算法覆盖现有声明：

如果 property 是声明中CSS声明的属性名称区分大小写的匹配项，请让声明为CSS   声明。



否则，将属性名称为 property 的新CSS声明附加到声明，并让声明成为CSS声明。< / p>

有一些解决方法：

使用cssText代替驼峰式IDL属性：

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

设置后检查样式。如果你得到空字符串，则表示它没有被识别。

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

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

Answer 2

您可以使用课程

＆＃13;

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

＆＃13;

#testId {
  height: 8em;
  height: 8rem;
  background-color: black;
  color: white;
}

#testId.high { /* remember that ID is more specific than class */
  height: 12em;
  height: 12rem;
}

＆＃13;

<!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>

＆＃13;

或者如果值是动态的，您可能必须插入样式标记才能支持CSS级联

＆＃13;

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);

}

＆＃13;

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

＆＃13;

<!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>

＆＃13;

为一个css属性设置多个值

2 个答案: