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
– Get Off My Lawn, Commented Jan 25, 2018 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 <style> tag with the two variations. — chriskirknielsen
– chriskirknielsen, Commented Jan 25, 2018 at 15:58
You can create a class with the properties you want to apply and add that class with JS. — Gonzalo
– Gonzalo, Commented Jan 25, 2018 at 15:59

Get Off My Lawn · Accepted Answer · 2018-01-26 14:58:06Z

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>

bbqq92 · Accepted Answer · 2018-01-25 16:16:50Z

0

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>

answered Jan 25, 2018 at 16:16

bbqq92

636 bronze badges

Comments

Mark Schultheiss · Accepted Answer · 2018-01-25 16:52:52Z

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>

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related