[CSS/JS] CSSのプロパティ名をベンダープレフィックス付きで取得

※2012.05.19 : 記事の内容とスクリプトを修正しました。
※2012.08.27 : 以下のコードを改修したものがこちらにあります→

表題のような事がしたかったので、そのような関数を書いてみました。

var cssProp = function( name, camelcase ) {

	var index = (typeof camelcase === 'undefined') ? 0 : camelcase ? 0 : 1,
		cacheObj,
		element,
		prop;

	if ( !cssProp.cache ) {
		cssProp.cache = {
			element: document.createElement( 'div' ),
			vendor: (/webkit/i).test( navigator.appVersion ) ? ['webkit', '-webkit-'] :
				(/firefox/i).test( navigator.userAgent ) ? ['Moz', '-moz-'] :
				(/msie/i).test( navigator.userAgent ) ? ['ms', '-ms-'] :
				'opera' in window ? ['O', '-o-'] :
				'',
			transitionEvent: {
				webkit: 'webkitTransitionEnd',
				Moz: 'transitionend',
				ms: 'MSTransitionEnd',
				O: 'oTransitionEnd'
			}
		}
	}

	cacheObj = cssProp.cache;

	if ( cacheObj.hasOwnProperty( name ) ) {
		return cacheObj[name][index];
	}
	if ( name.toLowerCase() === 'transitionend' ) {
		return cacheObj.transitionEvent[cacheObj.vendor[0]];
	}

	element = cacheObj.element;
	prop = name.replace( /-./g, function( m ) {
		return m.charAt( 1 ).toUpperCase();
	} );

	if ( prop in element.style ) {
		cacheObj[name] = [prop, name];
		return cacheObj[name][index];
	}

	prop = cacheObj.vendor[0] + prop.replace( /./, function( str ) {
		return str.toUpperCase();
	} );

	if ( prop in element.style ) {
		cacheObj[name] = [prop, cacheObj.vendor[1] + name];
		return cacheObj[name][index];
	}

	cacheObj[name] = [undefined, undefined];
	return undefined;
};

サンプル

引数にプロパティ名を渡して呼び出すと、対応している場合は環境に応じたプロパティ名が、対応していない場合はundefinedが返ります。以下はIE9の場合の例。

alert( cssProp( 'transform' ) ); // 'msTransform';
alert( cssProp( 'transition' ) ); // undefined

キャメル記法でなく、ハイフン区切りな文字列で取得したい場合は、第二引数にfalseを渡します。

alert( cssProp( 'transform', false ) ); // '-ms-transform';

ちなみに「3D系のtransformに対応していない場合」とかは考慮してません…(perspectiveの実装を調べればOK？)。あと、transitionEndは実装の判定方法が分からなかったので、そこはすっ飛ばして常にベンダープレフィックスが付与された文字列が返ります。transitionに対応していればイコールtransitionEndも対応とみなして良いものなんでしょーか(‘A’ ?)

とりあえず自分で作ってみたかったというのが第一にあったので挑戦してみましたが、特に理由が無い限りはModernizrというHTML5やCSS3の実装に関する強力なライブラリがあるようなので、そちらを使わせてもらった方がいいですね。

うーん、もっと勉強しないとなー。

Tweet