Add multiple lines of CSS with JavaScript of the same property

Question

I'm trying to add multiple lines of CSS for the same property (overruling for multiple browsers) but I only see the last appended.

I see why this happens, but I have no clue on how to fix it. Changing the = into a += didn't work either. How should I change this so they are all appended correctly?

    ribbon.style.background = '-webkit-linear-gradient(left, ' + config.ribbonColorStart + ' 0%, ' + config.ribbonColorEnd + ' 100%)';
    ribbon.style.background = '-moz-linear-gradient(left, ' + config.ribbonColorStart + ' 0%, ' + config.ribbonColorEnd + ' 100%)';
    ribbon.style.background = '-o-linear-gradient(left, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)';
    ribbon.style.background = '-ms-linear-gradient(left, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)';
    ribbon.style.background = 'linear-gradient(to right, ' + config.ribbonColorStart + ' 0%,' + config.ribbonColorEnd + ' 100%)';

You don't need to fix it. Every browser will accept the one that it can interpret. — Prinzhorn
– Prinzhorn, Commented Sep 27, 2013 at 13:34
What's about writing all the values into an extra vraiable and append that to ribbon.style.background normally any browser will use it's own equivalent? — Bernie
– Bernie, Commented Sep 27, 2013 at 13:34
Why not create a new class in your CSS with all those styles, then just add or remove the class to the element? — CaribouCode
– CaribouCode, Commented Sep 27, 2013 at 13:34
If you really want to have all values assigned, you can use ribbon.style.cssText = 'all-your-gradients', but it won't change anything. — Prinzhorn
– Prinzhorn, Commented Sep 27, 2013 at 13:49

Niet the Dark Absol · Accepted Answer · 2013-09-27 13:34:52Z

1

You would have to browser-detect it. Something like:

try {
  ribbon.style.backgroundImage = "linear-gradient(...)";
  if( !ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none")
    ribbon.style.backgroundImage = "-webkit-linear-gradient(...)";
  if( !ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none")
    ribbon.style.backgroundImage = "-moz-linear-gradient(...)";
  if( !ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none")
    ribbon.style.backgroundImage = "-o-linear-gradient(...)";
  if( !ribbon.style.backgroundImage || ribbon.style.backgroundImage == "none")
    // gradient not supported, fall back here
}
catch(e) {
  // gradient not supported and browser does't like bad values. Fall back here
}

It should be noted that -ms-linear-gradient has never existed: IE9 didn't support gradients, IE10 fully supports them.

Of course, you could just put the styles in a class and add that class to your element ;)

answered Sep 27, 2013 at 13:34

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Prinzhorn Over a year ago

WHY? This does not make any sense.

Niet the Dark Absol Over a year ago

@Prinzhorn What part doesn't make sense? If the browser can't understand the value you give it, it will either empty it or set it to "none". Or fail with an error, better edit to catch that.

Prinzhorn Over a year ago

You are not gaining anything by doing these checks. It's working perfectly the way the OP coded it.

Niet the Dark Absol Over a year ago

@Prinzhorn Erm... no it isn't. Let's say the browser only recognises -webkit-linear-gradient. So the first assignment in the OP works. But then you're overwriting it with a bad value, causing it to fail and revert to having no background. It works in CSS because CSS is designed that way. JavaScript isn't.

Prinzhorn Over a year ago

Nope. Setting it to an invalid value does not magically turn it into none. jsbin.com/EFOkoFa/1/edit

|

Collectives™ on Stack Overflow

Add multiple lines of CSS with JavaScript of the same property

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related