【JavaScript】【CSS】JavaScriptを用いて、読み込んだ外部CSSを操作してみたい

引き続きGoogle App Engine上でアプリケーションを作成しています。
前回のエントリーの地点で画面のレイアウトはほぼ出来ているのですが、一つだけ物足りない点があります。
それは「中央ペインのサイズがリサイズできない」ことです。
私のイメージとしては、右側に幅３００ピクセルの情報表示バーを出して、中央のメイン表示部分のサイズはウィンドウのサイズに応じて自在に変化するようなつくりにしたかったのですが、どうもうまくいきません。

これはどうやらCSSだけではなくてJavaScriptを用いて解決しなくてはならない問題のようです。

JavaScriptをプロジェクトの中で使うときに、一番気になるのが「名前空間の衝突」です。
たとえば今回のケースでは、中央ペインのサイズを変更するJavaScript関数を作るわけですから、「resize_center_pane」とかそういう感じの名前をつけたくなります。ですが、「resize_center_pane」なんてありがちな名前、世界のどこかの人が必ず別の場所で使っているわけです。すると同じ名前で別の関数が定義されますから、妙な動作が起きてしまいます。

これを防ぐために、Javaではパッケージの仕組みがあり、Pythonではモジュールの仕組みがあるのですが、JavaScriptではそういう仕組みが一切ありません。・・・困りました。

と思ったらあっさり問題解決です。
めざせ生涯現役！: JavaScript と名前空間 
なるほど、JSONの記法を用いてJSONでもなんでもなくてタダのオブジェクトの作成時に使う決まり事記法だったみたいです・・・無知ですみません・・・新規にオブジェクトを作成して、その子要素として関数を持たせていけばいいわけですね。

早速真似してみました。

var HBenpitsu = {
	version: '0.1.0',
	author: 'akisute'
}

これでばっちりです！

さて、名前空間の問題が解決したところで、本題の「中央ペインのサイズを制御する」処理に入ります。
まずは右側ペインの横幅を外部CSSで定義します。
あとはwindow.onloadとwindow.onresizeのタイミングで、「中央ペインの横幅を、document.widthから右側ペインの横幅を引いた値にする」処理を追加してやればいいだけですね。
簡単楽勝。さっさとやっちまいましょう。

HBenpitsu.resize_pane_center = function() {
	var pane_center = document.getElementById("pane_center");
	var pane_right = document.getElementById("pane_right");
	var width_pane_right = String(pane_right.style.width);
	width_pane_right = width_pane_right.match(/\d+?/i);
	pane_center.style.width = 
	(document.width - parseInt(width_pane_right)) + "px";
}

ところが
これが
動きません！

Firebugを立ち上げて１行ずつデバッグしてみたのですが、なんと「var width_pane_right = String(pane_right.style.width)」の返り値がnullになっています！そんな馬鹿な！！何度CSSファイルを見直しても間違いなくwidthプロパティは定義されています。困りました。

調べること十数分、原因らしきものを発見です。
[暴満館] JavaScriptによるCSSの操作 
この長々としたソースコードと説明のなかに、
document.styleSheets[ sheetindex ].cssRules
こんな一文が出てきます。CSSを参照しているみたいですが・・・document.styleSheets？
Firebugで参照してみると、あ、あった。



なるほど。外部CSSを参照するときにはこのdocument.styleSheetsを見る必要があって、Element.styleで参照しているのは、HTMLタグ要素のstyle属性だったんですね。勉強になりました。

原因もわかりましたし、外部CSSを参照するにはそれなりにテクニックが必要そうだということもわかりましたので、そろそろ外部JavaScriptライブラリを導入して、問題を解決してみようと思います。