是否可以使用 JavaScript 两次设置相同的 CSS 属性？答案

【问题标题】：Is it possible to set the same CSS property twice with JavaScript?是否可以使用 JavaScript 两次设置相同的 CSS 属性？
【发布时间】：2018-01-25 15:56:38
【问题描述】：

使用 CSS，出于兼容性原因，您可以以不同的格式定义相同的属性两次。

例如：

body {
    /* Since this is defined first, it will apply for all browsers that don't support the next property. */
    background-color: '#FFF';

    /* Since this is defined last, it will apply for all browsers that support it, and hence will override the previous property. */
    background-color: myFancyColorFunction();
}

有什么方法可以通过 JavaScript 定义两个与内联 CSS 相同的属性？

【问题讨论】：

您只需拨打element.style.backgroundColor = 'red' 两次。
据我所知，没有。您可以测试浏览器对样式的支持并注入您想要的样式。或者，您可以注入具有两种变体的<style> 标记。
你有什么尝试吗？
您可以创建一个具有您要应用的属性的类，并使用 JS 添加该类。
myFancyColorFunction(); 是一个有效的 CSS 属性吗？

标签： javascript css

【解决方案1】：

您可以根据需要多次调用element.style.x = 'y'，并且每次调用它时，它都会重置css属性，因为它会将其设置为内联：

<div style="background-color: red"></div>

如果元素上已经存在样式（内联），JavaScript 将更新元素上的当前样式，而不是添加为新样式。

这将允许您根据需要多次设置样式，最后在属性x 上调用的样式将是最终样式。

你可以通过这个例子看到这里

let div = document.querySelector('div')
let colors = ['red', 'yellow', 'green', 'blue']
let i = 0

function setColor() {
  div.style.backgroundColor = colors[i];
  div.textContent = colors[i];
  ++i < colors.length && setTimeout(setColor, 1000)
}

setTimeout(setColor, 1000)

body {
  padding: 0;
  margin: 0;
}

div {
  background-color: orange;
  width: 100vw;
  height: 100vh;
  color: white;
  font-size: 3rem;
  text-align: center;
  line-height: 100vh;
}

&lt;div&gt;orange - default css&lt;/div&gt;

【讨论】：

【解决方案2】：

如果我错了，我不确定是否要纠正我，但我认为浏览器是这样工作的：

找到应该应用于 Element 的类
尝试将背景颜色设置为 '#FFF' -> 好的
尝试将背景颜色设置为 myFancyColorFunction() -> 异常 3.1 捕获异常并继续
...

一个 Dom 元素只能有一种背景颜色，所以技术上它更像是有趣的后备。

我认为它正在工作（快速测试）：

document.getElementById("box1").style = 'background: yellow; background: linear-gradient(red, yellow);'

console.log("style", document.getElementById("box1").style.background);

&lt;div id="box1"&gt;Test&lt;/div&gt;

【讨论】：

【解决方案3】：

我将对此进行一些假设，目标是修改实际的样式表值。请注意，我仅在旧计算机上的 chrome 上对此进行了测试。

这可能是一种可怕的做法。

我的第一个假设是样式表定义如下：

<style id="findme" type="text/css">
  .myfunstuff {
    background-color: darkred;
  }
</style>
<div class="myfunstuff">Howdy fun stuff here</div>
<script type="text/javascript">
  var stylesheet = {};
  // your selector may vary here
  for (var i in document.styleSheets) {
    if (document.styleSheets[i] && document.styleSheets[i].cssRules[0] && document.styleSheets[i].cssRules[0]["selectorText"] && document.styleSheets[i].cssRules[0]["selectorText"] == ".myfunstuff") {
      stylesheet = document.styleSheets[i];
      break;
    }
  }
  stylesheet.cssRules[0].style.backgroundColor = "lightblue";
// now for the "twice" set it to something else
  stylesheet.cssRules[0].style.backgroundColor = "lime";
</script>

【讨论】：