[Javascript] CSS의 벤더 프리픽스(Vendor Prefix)를 자바스크립트에서 하기

시작하기 전에, 벤더 프리픽스란?

뜻풀이만 먼저 하자면 Vendor (공급 업체) + Prefix (접두사) 이다.

즉 업체마다 표기가 필요한 것들을 말한다.

css의 속성은 마이크로소프트에서 만든 익스플로러, 구글에서 제공하는 크롬 등에서 다 다르게 작용하기 때문에 브라우저마다 따로 설정을 해주어야 한다.

CSS의 프리픽스 키워드는 자바스크립트에서 쓸 수 없다. 예를들면 -webkit-이나 -ms-같은 것들을 말이다. 자바스크립트는 해당 css 속성 사이에 - (마이너스)를 빼고 단어만 적어넣어야 한다.

el.style.webkitanimation = 'stylus';

대충 이런식인데, 만약 이걸 노가다식으로 코드마다 하나하나씩 일일이 붙여넣기 한다면..

el.style.webkitanimation = 'stylus';
el.style.ozanimation = 'stylus';
el.style.msanimation = 'stylus';
el.style.mozanimation = 'stylus';

이런 효율성없고 긴 코드가 되어버린다.

var setVendor = function(el, property, value) {
    var vend = ['webkit','moz', 'ms', 'o',''];
    var len = vend.length;
    for(var i=0; i<len; i++)
    el.style[vend[i] + property] = value;
}

 이 함수를 붙여넣기하여 사용한다면 코드의 효율성 증대를 위한 재사용이 가능하다.