ImpressCMS
HOME  >  JSCRIPT  > DOMの指定方法 > idとclass属性のDOM設定

10 - 2 : idとclass属性のDOM設定

CSSのところで、同じような設定をするためにグルーピングしたり、ある特定の場所を設定したりするときに
classという属性を使ったり、idというタグを使ったりします。
複数の要素からなる(1つでもいいですが)グループのタグがclassで、
唯一無二の要素を設定するタグがidとなります。

今回のサンプルとなるindex.htmlの中でも
  <h1 id="title">タイトル</h1>
  <p class="sample">
    本文はここに入ります。<br />
	<span class="red">赤い文字</span>
  </p>
  <p class="sample">
    二つ目の段落です。
  </p>
このように書いているところがあります。
idは「title」という名前が着いている見出し1のエリアがありますし、
classは、「sample」という名前のグループの段落が2つありますね。

css及びjQueryでは、
idを表す記号は「#(ハッシュ)」で表現し
classを表す記号は「.(ドット)」で表現します。

CSSの場合は、
/* idがtitleのDOMの設定 */
#title {
 color: black;
}

/* classがsampleのDOMの設定 */
.sample {
 color: pink;
}
このような書き方になりますし、jQueryの場合は
/* idがtitleのDOMの設定 */
$('#title').css({
 color: 'black';
});

/* classがsampleのDOMの設定 */
$('.sample').css({
 color: 'pink';
});

となります。

今回は練習で、idがsanbanとなっている段落のCSSを「文字を太字にする」ように変更するjQueryを表記してみましょう。
// idがtitleのDOMの設定 
$('#sanban').css({
 'font-weight': 'bold',
});

// もしくは 
$('#sanban').css({
 fontWeight : 'bold',
});
このように書くことが出来ます。

属性付きの要素ノードの表現

上の表現では、classタグの設定は、classがsampleとなっている要素ノードはすべて変更されることになります
ただ、同じクラス名は、同じ要素ノードにする必要はありません。
仮にこのクラスに属するノードは太字にするfutojiというクラスを作成したとしたばあい、別にp要素でもh1要素でもdiv要素でもこのclassを使用することは可能です。
ただ、同じfutojiクラスでもp要素ののものだけをjQueryで設定したい、変更したい、処理したいということがありえます。
このときは、
要素名.クラス名
 (要素名と「.」とクラス名の間にはスペースは入れてはいけません
という書き方をします。

※要素名と「.」の間にスペースを空けてしまうと、意味が変わってくる(p要素の中に(子孫ノードとして)設定されている名前がクラス名の要素 )ので気をつけましょう
Publish : 3367 bytes - updated 2024-08-05 by 管理人