How to set CSS3 transition using javascript?

Question

How can I set CSS using javascript (I don\'t have access to the CSS file)?

#fade div {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-         


        

Answer 1

var vendors = [
    '-webkit-',
    '-o-',
    '-moz-',
    '-ms-',
    ''
];

function toCamelCase(str) {
    return str.toLowerCase().replace(/(\-[a-z])/g, function($1) {
        return $1.toUpperCase().replace('-', '');
    });
}

function setCss3Style(el, prop, val) {
    vendors.forEach(function(vendor) {
        var property = toCamelCase(vendor + prop);

        if(p in el.style) {
            el.style[p] = val;
        }
    });
}

usage :

setCss3Style(someElement, 'transition', 'opacity 1s');

Here's a live demo.