javascript_12

12章 動的なページの作成 †

12.1 CSSとDOM †

JavaScript?を利用した動的な変化
=> Ajax
=> CSSとDOMの組合わせがキモ！

12.1.1 styleプロパティ †

CSSのスタイルプロパティの取得や設定はstyleオブジェクトを介して行う。
(すでに説明した)DOMの要素へのアクセス方法の一つを使って
個々の要素に対する参照を取得する。

var tstElem = document.getElementById("testelement");

スタイルの変更には、プロパティの値を直接代入する。

tstElem.style.color = "#fff";

例12-1

スタイルの変更は簡単にできるが、現在設定されている値の取得・確認は難しい。

例12-2

スタイルシートでプロパティに値を設定したとしても、
JavaScript?や要素に直接指定しなければ、JavaScript?からアクセスしても値は空になる。
styleプロパティにアクセスできても、具体的に何が返されるかはブラウザによって異なる。
一貫性のある結果を望むのなら、フォーマットの変換が必要。

• IE, Opera：currentStyleプロパティ
• Firefox, Safari/WebKit?：window.getComputedStyle?

例12-3

12.2 フォントとテキスト †

フォント：
文字そのものに関連するもの。種類、サイズ、タイプ…etc によって文字の外観を制御
text：
フォントよりも装飾的で、文字列に対して適用され、文字列の下線・上線、打消し線…etc などで
水平方向でのそろえ方を制御

12.2.1 フォント †

フォントを制御するスタイル属性一覧

例12-3で示したように、要素のフォントを変更すると、
外観で設定したスタイルを無効にしなくもその要素に含まれる全てのテキストのフォントが変わる
⇒CSSによってもたらされる重ね合わせ(カスケード)効果

また、font属性を使って、一度に複数のフォント属性を変更することも可能

div.style.font = "italic small-caps 400 14px verdana";

12.2.2 テキスト †

テキスト属性一覧

例12-4

12.3 配置と移動 †

NetscapeとMicrosoftが協力してCSS-P(CSS Positioning)と呼ばれる仕様を共同開発。
これはページをxy座標およびz座標で表されるグラフとみなすもの。
最終的には、CSS-PはCSS2の仕様の中に取り込まれた。

12.3.1 動的な位置指定 †

CSS2の中の位置指定関連のプロパティ

top、right、bottom、left、z-indentはpositionプロパティが
absolute、relative、fixedのいずれかに設定されている場合にのみ機能する。

例12-5

12.3.2 ドラッグ †

例12-6

12.4 サイズとクリッピング †

要素の大きさは、6個のCSS属性によって制御（width、height…etc）

12.4.1 overflowと動的な内容 †

Ajaxの呼び出しなどによって動的な要素の内容が入れ替わると、
要素の中に納まる内容のサイズが大きく変化することがある。
その場合は、orverflow属性にautoを設定しておくと、
内容が大きすぎるとスクロールバーが現れる。

例12-7

内容の変更に関するもう一つの方法は、 読み取り専用のプロパティoffsetWidthとoffsetHeightを使って、
内容のサイズを実際に測定すること。
⇒しかし、プロパティの結果はブラウザによって異なるので注意が必要。

12.4.2 クリッピング †

CSSのclipプロパティは形状と寸法を指定。(top、right、bottom、left、rect)

例12-8

12.5 display、visibilityおよび不透明度 †

ウェブページ要素は、その要素が見えなくても、レイアウトに影響を及ぼす場合がある。
CSSにおいては可視性、不透明度、表示/非表示がそれぞれ独立して設定できるようになっている。

12.5.1 効果の選択 †

それぞれの効果には、それぞれ効力を最大に発揮するところがあるので、
的確な場面で使うようにする。

12.5.2 タイムリーな情報選択 †

フォームフォーカスしたときに、必要な情報だけを表示してすっきりとしたデザインにする。
また、その方がユーザーの注意も引ける。

例12-9

12.6 フォームの折りたたみ †

Firefox、Opera、SafariにはgetElementsByClassName?という、
指定されたクラスの要素を全て戻してくれるメソッドがある。

var elems = document.getElementsByClassName('elements');

IE8では「クエリーセレクタ」と呼ばれるメソッドが実装されている

var elems = document.querySelectorAll('.elements');

ブラウザの互換性をチェックするためには以下のよなコードを書けばよい

if (document.querySelectorAll) {
  elems = document.querySelectorAll('.elements');
}
else if (document.getElementsByClassName) {
  elems = document.getElementsByClassName('elements');
}

例12-10

練習問題 †

問題12-1 †

スタイルシートでプロパティに値を設定したとしても、
要素に直接指定しなければ、JavaScript?からアクセスしても値は空になる。

IE, OperaならcurrentStyleプロパティを、
Firefox, Safariならwindow.getComputedStyle?を使用するとよい。

※12.2.1参照

var div = document.getElementById("hoge");
vad divColor;

if (div.currentStyle) {
  divColor = div.currentStyle['color'];
}
else if (window.getComputedStyle) {
  divColor = window.getComputedStyle(div, null).color;
}

問題12-2 †

element.style.fontSize = "14px"
element.style.color = "#ff0000";
element.style.lineHeight = "16px"

※12.2.2参照

問題12-3 †

変更した要素が他の要素の子要素になっていて、
その親要素が別のスタイルを持っている場合。

問題12-4 †

ブロックを見えなくする方法

• displayをnoneにする [#k2cc331e]

var div = document.getElementById("hogehoge");
div.style.display = "none";

• 幅と高さを0にする [#pf84f76e]

#div {

height: 0;
weight: 0;

}

解答に載っていたもの

• 全体をクリップ [#we7bfaa8]
• 要素をページの外に出す [#jb71ba13]

参考資料

• 初めてのJavaScript? 第２版