JavaScript - 動的なページの作成(スタイルの設定)

開発環境

• OS X Lion - Apple(OS)
• Safari (Webプラウザ)
• TextWrangler(Text Editor) (BBEditの無料、light版)
• Script言語:JavaScript
• JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリー・ジャパン、2009年、ISBN978-4-84311-425-5) の12章(動的なページの作成)練習問題12-2解いてみる。

その他参考書籍

• JavaScript 第5版 David Flanagan (著), 村上 列 (翻訳)
• JavaScriptクイックリファレンス David Flanagan (著), 木下 哲也 (翻訳), 福龍興業 (翻訳)
• 『jQueryクックブック』(jQuery Community Experts 著、株式会社クイープ 訳、オライリー・ジャパン、2010年、ISBN978-4-87311-468-2)

12-2.

他の要素のスタイルで上書きされている場合テキストが思った通りに変わらない場合がある。

このテキストのフォントサイズを14pt、赤い色、行の高さを16ptで表示。(しようとしても変わらない。)

コード(TextWrangler)

var d0 = document.getElementById('d0');
var style= d0.style;
style.color = 'red';
style.fontSize = '14pt';
style.lineHeight = '16pt';

HTML(TextWrangler)

<style>
#d1{
  color:blue;
  font-size:50pt;
  line-height:100pt;
}
</style>
<div id="d0">
<div id="d1">
このテキストのフォントサイズを14pt、赤い色、行の高さを16ptで表示。
</div>
</div>