JavaScript?を利用した動的な変化
=> Ajax
=> CSSとDOMの組合わせがキモ!
CSSのスタイルプロパティの取得や設定はstyleオブジェクトを介して行う。
(すでに説明した)DOMの要素へのアクセス方法の一つを使って
個々の要素に対する参照を取得する。
var tstElem = document.getElementById("testelement");
スタイルの変更には、プロパティの値を直接代入する。
tstElem.style.color = "#fff";
スタイルの変更は簡単にできるが、現在設定されている値の取得・確認は難しい。
スタイルシートでプロパティに値を設定したとしても、
JavaScript?や要素に直接指定しなければ、JavaScript?からアクセスしても値は空になる。
styleプロパティにアクセスできても、具体的に何が返されるかはブラウザによって異なる。
一貫性のある結果を望むのなら、フォーマットの変換が必要。
フォント:
文字そのものに関連するもの。種類、サイズ、タイプ…etc によって文字の外観を制御
text:
フォントよりも装飾的で、文字列に対して適用され、文字列の下線・上線、打消し線…etc などで
水平方向でのそろえ方を制御
フォントを制御するスタイル属性一覧
CSS名 | JavaScript?のstyle属性名 | 用途 |
font-family | fontFamily | フォントの種類を設定 |
font-size | fontSize | フォントサイズを指定 |
font-size-adjust | fontSizeAdjust? | 英小文字xの高さと指定されたフォントサイズの高さの比率を設定 |
font-stretch | fontStretch | フォントを拡大、あるいは縮小 |
font-style | fontStyle | normal(デフォルト)、italic(斜体)、oblique(斜体)のいずれかを指定 |
font-variant | fontVariant | フォントのスモールキャップを設定 |
font-weight | fontWeight | 文字の太さを設定 |
例12-3で示したように、要素のフォントを変更すると、
外観で設定したスタイルを無効にしなくもその要素に含まれる全てのテキストのフォントが変わる
⇒CSSによってもたらされる重ね合わせ(カスケード)効果
また、font属性を使って、一度に複数のフォント属性を変更することも可能
div.style.font = "italic small-caps 400 14px verdana";
テキスト属性一覧
CSS名 | JavaScript?のstyle属性名 | 用途 |
color | color | テキストの色を指定 |
line-height | lineHeight | テキストの行の高さを指定 |
text-decoration | textDecoration | none、underline、overline、line-throughなどを指定 |
text-indent | textIndent | テキストの先頭行のインデントの位置を指定 |
text-transform | text-transform | none、capitalize、uppercase、lowercaseなどを指定 |
white-space | whiteSpace | normal、pre、nowrapなどを指定 |
direction | direction | ltr、rtlを指定 |
text-align | textAlign | テキストのそろえ方を指定 |
word-spacing | wordSpacing | 単語の間隔を設定 |
NetscapeとMicrosoftが協力してCSS-P(CSS Positioning)と呼ばれる仕様を共同開発。
これはページをxy座標およびz座標で表されるグラフとみなすもの。
最終的には、CSS-PはCSS2の仕様の中に取り込まれた。
CSS2の中の位置指定関連のプロパティ
プロパティ名 | 効果 |
position | relative、absolute、static(デフォルト)、inherit、fixedのいずれかを指定 |
top | コンテナの最上部から相対的な位置を指定 |
left | コンテナの最左部から相対的な位置を指定 |
bottom | ページの下端を0とする値を設定 |
right | ページの右端を0とする値を設定 |
z-indent | ページに対して垂直方向の座標を設定 |
top、right、bottom、left、z-indentはpositionプロパティが
absolute、relative、fixedのいずれかに設定されている場合にのみ機能する。
要素の大きさは、6個のCSS属性によって制御(width、height…etc)
Ajaxの呼び出しなどによって動的な要素の内容が入れ替わると、
要素の中に納まる内容のサイズが大きく変化することがある。
その場合は、orverflow属性にautoを設定しておくと、
内容が大きすぎるとスクロールバーが現れる。
内容の変更に関するもう一つの方法は、
読み取り専用のプロパティoffsetWidthとoffsetHeightを使って、
内容のサイズを実際に測定すること。
⇒しかし、プロパティの結果はブラウザによって異なるので注意が必要。
CSSのclipプロパティは形状と寸法を指定。(top、right、bottom、left、rect)
ウェブページ要素は、その要素が見えなくても、レイアウトに影響を及ぼす場合がある。
CSSにおいては可視性、不透明度、表示/非表示がそれぞれ独立して設定できるようになっている。
それぞれの効果には、それぞれ効力を最大に発揮するところがあるので、
的確な場面で使うようにする。
フォームフォーカスしたときに、必要な情報だけを表示してすっきりとしたデザインにする。
また、その方がユーザーの注意も引ける。
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'); }
スタイルシートでプロパティに値を設定したとしても、
要素に直接指定しなければ、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; }
element.style.fontSize = "14px" element.style.color = "#ff0000"; element.style.lineHeight = "16px"
※12.2.2参照
変更した要素が他の要素の子要素になっていて、
その親要素が別のスタイルを持っている場合。
ブロックを見えなくする方法
var div = document.getElementById("hogehoge"); div.style.display = "none";
#div { height: 0; weight: 0; }
解答に載っていたもの
参考資料