DOM Using removeClass

Ajax YUI DOM

YAHOO.util.Dom.removeClass('element','classnames')は指定したelementのクラス属性を削除するためのメソッド。（elementの部分はobjectでもよい）

サンプルコードは以下。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META http-equiv="Content-Style-Type" content="text/css">
<TITLE>Ajax_Sampling</TITLE>
<!-- #style で　id=foo,barの全ての要素に適用する。 -->
<style type="text/css"> 
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
/*　（訳）
body部のマージンとパディングの設定は要素（element）の位置を決める
のにエラーの原因となることが多いので非推奨。
YUIのCSSでは、これをともに0に設定するのを基本にしている
*/
body {
	margin:0;
	padding:0;
}
#foo {
    margin-bottom:1em;
}
</style>

<!-- 読み込むjs --> 
<script type="text/javascript" src="scripts/yui/yahoo/yahoo-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/dom/dom-min.js" >
</script> 
<script type="text/javascript" src="scripts/yui/event/event-min.js" >
</script> 

<script type="text/javascript">

init = function() {

    var removeClass = function() {
		// id=fooの要素から、classname='baz'を削除
        YAHOO.util.Dom.removeClass('foo', 'baz');
        //Dom.get('id')で要素が取り出し。クラス属性を表示。
        alert(YAHOO.util.Dom.get('foo').className);

		// id=fooの要素から、classname='baz'を再度削除
		// もうないから、結果かわらず。
        YAHOO.util.Dom.removeClass('foo', 'baz');
        //Dom.get('id')で要素が取り出し。クラス属性を表示。
        alert(YAHOO.util.Dom.get('foo').className);
    };
	
	// id=demo-runのクリックイベントのハンドラとしてremoveClass（上で定義）を設定。
　　　YAHOO.util.Event.on('demo-run', 'click', removeClass);

}
</script>
</HEAD>

<BODY onload=init()>

<div id="foo" class="bar baz">foo</div> 
<button id="demo-run">実行</button>

</BODY>
</HTML>

指定するオブジェクトに、そのクラス名が存在しない場合、無視される。