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-1解いてみる。

その他参考書籍

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

12-1.

要素に直接styleが指定されてないから。別途スタイルが指定されている場合の取得方法。

こテキストのフォントカラーを取得

コード(HTML)(TextWrangler)

<style>
#h0{
  color:red;
}
</style>
<h1 id="h0">こテキストのフォントカラーを取得</h1>

コード(TextWrangler)

function getStyle(obj,jsprop){
  if(obj.currentStyle){
    return obj.currentStyle[jsprop];
  } else if(window.getComputedStyle){
    return window.getComputedStyle(obj,null)[jsprop];
  } else {
    return null;
  }
}
var h0 = document.getElementById('h0');
var color1 = getStyle(h0,'color');
var color2 = h0.style.color;
var result = "color: " + color1 + "\n" +
             "color(直接取得): " + color2;
$('#pre0').text(result);