How to set vendor prefixed CSS values (NOT property names) | client-side

Unlike elem.style.background = 'linear-gradient{...}'

you can use elem.style.cssText = 'background:linear-gradient{...}; ...'

This approach let you add a several styles at once to element, of course inline. Only the property that the browser understands will be written. So, just take a current inline styles elem.getAttribute('style') (string, not a style object) or create empty string || '' and add your own.

let elem = document.getElementById('elem');
let styleAdd = 'background: -prefix-linear-gradient{...}; background: linear-gradient{...};';
elem.style.cssText = (elem.getAttribute('style') || '') + styleAdd;

In order to do what you're asking, you'd need a reference to compare the browser that's currently being used against what prefixes are needed; like caniuse. Or you could make some mixins with the CSS @supports rule, but that might be more trouble than it's worth.

There is an existing solution, autoprefixer, but it would require you to use postcss. The README has examples of various build tool plugins. I use SCSS and autoprefixer, and I'm living the dream.