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

開発環境

• Microsoft Windows 7 Home Premium (OS)
• Internet Explorer 9 Beta(プラウザ)
• Microsoft Visual Web Developer 2010 Express Edition (IDE)
• Script言語:JavaScript

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

12-4.

問題では2種類の方法をあげることになってるけど、せっかくなので5種類の方法を使った例のコードを書いてみる。

例1: ブロックの幅、高さを0にして、境界からはみ出した内容は切り取る。

var d0 = document.getElementById("d0"); d0.style.width = 0; d0.style.height = 0; d0.style.overflow = "hidden";

このブロックを隠す。

 

例2: クリッピング

var d1 = document.getElementById("d1"); d1.style.position = "absolute"; d1.style.clip = "rect(0px,0px,0px,0px)";

このブロックをクリッピング！

 

例3: displayプロパティをnoneに設定

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

このブロックが見えなくなります。

 

例4: プロパティvisibilityをheddenに設定。

var d3 = document.getElementById("d3"); d3.style.visibility = "hidden";

このブロックが見えなくなります。

 

例5: 不透明度を0にする。

var d4 = document.getElementById("d4"); d4.style.opacity = 0;

このブロックが不透明になります。