DOM Using addClass

Ajax YUI DOM

YAHOO.util.Dom.addClass('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 addClass = function() {
			// classnameとして'baz'を追加
		 	YAHOO.util.Dom.addClass('foo', 'baz');
			// classnameを表示
	        alert(YAHOO.util.Dom.get('foo').className);

			// classnameとして'bar'をさらに追加
			// すでにあるので追加されない。
			YAHOO.util.Dom.addClass('foo', 'bar');
			// classnameを表示
	        alert(YAHOO.util.Dom.get('foo').className);
	 };

	// id=demo-runのクリックイベントのハンドラとしてaddClass（上で定義）を設定。
　　　YAHOO.util.Event.on('demo-run', 'click', addClass);

}
</script>
</HEAD>

<BODY onload=init()>

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

</BODY>
</HTML>

（注）すでにあるクラス名を追加しようとしても、追加されないようになっている。

サンプルの画面は以下のようになる。