DOM Using hasClass

Ajax YUI DOM

YAHOO.util.Dom.hasClass('element','classnames')は、指定したelementが、クラス要素として'classnames'（複数指定するときは、'−’の中にスペース区切りで指定）を持っているかどうかを調べる。

戻り値は、boolean。

サンプルコードは以下。

<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 testClass = function(e) {
		// id='foo'が'baz'をclass属性としてもっていれば,trueを返す。
		// trueがもどる。
		alert(YAHOO.util.Dom.hasClass('foo', 'baz'));
		// id='foo'が'baz'と'bar'をともにclass属性としてもっていれば,trueを返す
		// trueがもどる。
	    alert(YAHOO.util.Dom.hasClass('foo','bar baz'));
		// id='foo'が'baz'と'test'をともにclass属性としてもっていれば,trueを返す
		// falseがもどる。
	    alert(YAHOO.util.Dom.hasClass('foo', 'baz test'));
	};

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

}
</script>
</HEAD>

<BODY onload=init()>

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

</BODY>
</HTML>

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