Is it possible to set the same CSS property twice with JavaScript?

Question

With CSS, for compatibility reasons, you can define the same property twice in different formats.

For instance:

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

Is there any way I can define two of the same properties as inline-CSS via JavaScript?

You just call `element.style.backgroundColor = 'red'` twice. — Get Off My Lawn, Jan 25 '18 at 15:58
As far as I know, no. You can test the browser's support for the style and inject the one you want. Alternatively, you could inject a ` — chriskirknielsen, Jan 25 '18 at 15:58
The quick answer is "Yes" you can set it twice, the last will be the actual value, but is there something we do not know/see in your question? — Mark Schultheiss, Jan 25 '18 at 15:59
You can create a class with the properties you want to apply and add that class with JS. — Gonzalo, Jan 25 '18 at 15:59
Are you looking for [Instead of using prefixes I want to ask site visitors to upgrade their browser](https://stackoverflow.com/questions/33359157/instead-of-using-prefixes-i-want-to-ask-site-visitors-to-upgrade-their-browser), or [How to set vendor prefixed CSS values (NOT property names) | client-side](https://stackoverflow.com/questions/46309768/how-to-set-vendor-prefixed-css-values-not-property-names-client-side)? — guest271314, Jan 25 '18 at 16:39
Nope, my example is different. And no, of course `myFancyColorFunction` is not valid. It's an example to demonstrate something. — Mathias Lykkegaard Lorenzen, Jan 26 '18 at 07:25
@GetOffMyLawn post your comment as an answer and I'll accept it. It worked. — Mathias Lykkegaard Lorenzen, Jan 26 '18 at 08:16

Get Off My Lawn · Accepted Answer · 2018-01-26T14:58:06.677

You can call element.style.x = 'y' as many times as you want, and everytime that you call it, it will reset the css property due to the fact that it sets it inline like this:

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

If the style already exists on the element (inline) JavaScript will update the current style on the element instead of adding as a new style.

This will allow you to set the style as many times as you want, and the style that was called last on property x will be the final style.

You can see that here with this example

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

<div>orange - default css</div>

score 0 · Answer 2 · answered Jan 25 '18 at 16:16

Im not sure so correct me if i'm wrong but i think that the browser is working like that:

Found class which should be applied to Element
try to set background-color to '#FFF' -> ok
try to set background-color to myFancyColorFunction() -> exception 3.1 Catch exception and continue
...

A Dom Element can only have one background-color so technical it's more the fallback which is interesting.

I seams that it's working (made a quick test):

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

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

<div id="box1">Test</div>

score 0 · Answer 3 · answered Jan 25 '18 at 16:52

I am going to do a reach on this with some assumptions, the goal is to modify the actual style sheet values. Note I ONLY tested this on chrome on an older computer.

This is probably a horrid way to do this.

My first assumption is a style sheet defined such as:

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

Is it possible to set the same CSS property twice with JavaScript?

3 Answers3