Rev. 2.73

kangax씨는 또다시 재미있는 함수를 만들었습니다. 브라우저별로 특징을 가지는 CSS 프로퍼티의 지원여부를 분석하는 함수입니다. "BorderRadius" CSS 프로퍼티를 지원하는 브라우저에서만 사용되도록 스크립트를 작성할 수 있게 하는 것입니다. 이것은 아래와 같은 원리로 지원여부를 분석할 수 있습니다.

var el = document.createElement('div');
typeof el.style.marginLeft == 'string'; // true
typeof el.style.marginLeft2 == 'string'; // false

'marginLeft' in el.style; // true
'marginLeft2' in el.style; // false

그리고 다음과 같이 성능까지 고려한 함수로 작성하여 사용할 수 있게 하였습니다.

var getStyleProperty = (function(){
 
  var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'];
  var _cache = { };
 
  function getStyleProperty(propName, element) {
    element = element || document.documentElement;
    var style = element.style,
         prefixed,
         uPropName;
 
    // check cache only when no element is given
    if (arguments.length == 1 && typeof _cache[propName] == 'string') {
      return _cache[propName];
    }
    // test standard property first
    if (typeof style[propName] == 'string') {
      return (_cache[propName] = propName);
    }
 
    // capitalize
    uPropName = propName.charAt(0).toUpperCase() + propName.slice(1);
 
    // test vendor specific properties
    for (var i=0, l=prefixes.length; i<l; i++) {
      prefixed = prefixes[i] + uPropName;
      if (typeof style[prefixed] == 'string') {
        return (_cache[propName] = prefixed);
      }
    }
  }
 
  return getStyleProperty;
})();

예를 들어 DOM 요소를 기울이거나 모양 자체에 변형을 가할 수 있는 "transform" CSS 프로퍼티는 최신 브라우저들(Safari3, FF3.5, Chrome2)에서만 사용할 수 있습니다. 이 CSS 프로퍼티의 지원여부를 알아내려면 "getStyleProperty('transform')"을 호출하는 것으로 단방에 처리할 수 있게 되는 것입니다. 멋지죠?

var transform = getStyleProperty('transform'); // MozTransform
if (transform) element.style[transform] = 'rotate(90deg)';

덧. 아래는 Prototype에서 사용될 수 있도록 직접 수정한 코드입니다.

Element.addMethods({
  getStyleProperty: (function(){
    var prefixes = ['Moz', 'Webkit', 'Khtml', 'O', 'Ms'], _cache = {};
    return function(element, propName) {
      if (!propName) {
        propName = element;
        element = document.documentElement;
      }

      var style = element.style, prefixed;
      // check cache only when no element is given
      if (arguments.length == 1 && typeof _cache[propName] == 'string')
        return _cache[propName];
      // test standard property first
      if (typeof style[propName] == 'string')
        return (_cache[propName] = propName);

      // test vendor specific properties
      for (var i = 0, l = prefixes.length; i < l; i++)
        if (typeof style[prefixed = prefixes[i] + propName.capitalize()] == 'string')
          return (_cache[propName] = prefixed);
    }
  })()
});

$('element').getStyleProperty('transform'); // MozTransform
Element.getStyleProperty('transform'); // MozTransform

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar