<更新記録>
2008年 6月 23日
執筆

姉妹サイトから検索 Web検索

SWT - JavaでGUIプログラミング
きままにインデックス
PHPノート
ゴルフ道具研究所


クラスを複数指定

HTML要素には、複数のクラスを指定することができます。
class属性の中に、スペース区切りでクラス名を記述するだけです。

<style type="text/css">
.boldClass { font-weight: bold; }
.redClass { color: #FF0000; }
</style>
<div class="boldClass redClass">太字の赤字</div>

これをJavaScript経由で行おうとすると、直接属性を操作すればいいのですが、 IEだとclass属性には簡単にはアクセスできません。 が、JQueryのライブラリには、addClass()関数とremoveClass()関数が用意されていますので、 これらを使えば簡単にクラスの追加と削除を行うことができます。

<style type="text/css">
.boldClass { font-weight: bold; }
.redClass { color: #FF0000; }
</style>
<div id="myDiv" class="boldClass redClass">太字の赤字</div>
<script type="text/javascript" src="パス/jquery.js"></script>
<script type="text/javascript">
// <![CDATA[

var divElement = document.getElementByTagName('myDiv');
divElement.addClass('boldClass');
divElement.addClass('redClass');

// ]]>
</script>

便利ですが、prototype.jsとは衝突してしまうので、そこが痛いところですね。


Powered by VeryEasyCMS