如何使用javascript设置CSS3过渡？

Question

如何使用javascript设置CSS(我无法访问CSS文件)？

#fade div {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s;       
  transition: opacity 1s;
  opacity: 0;
  position: absolute;
  height: 500px;
  width: 960px;
}

例如:

document.getElementById('fade').HOW-TO-TYPE-webkit-transition = 'opacity 1s';

Answer 1

你应该看看这里:http://www.javascriptkit.com/javatutors/setcss3properties.shtml

正如您所看到的,使用" - "设置CSS属性只会导致下一个字符为大写:

document.getElementById('fade').style.WebkitTransition = 'opacity 1s';
document.getElementById('fade').style.MozTransition = 'opacity 1s';

Answer 2

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

用法:

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

这是一个现场演示.

Answer 3

你应该像这样使用camelCase表示法:

document.getElementById('fade').style.webkitTransition = 'opacity 1s';

比如由多个单词组成的每个属性和连字符分隔(例如css background-position变成js backgroundPosition.

可能在这个时候不是每个浏览器都在涉及浏览器特定前缀的属性中采用这种表示法,所以有些浏览器像firefox仍然接受Moz而不是moz(参见https://bugzilla.mozilla.org/show_bug.cgi?id=607381)