スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。



  

javascriptを使用して、画面の表示・非表示を制御する方法

マウスのアクションで画面内の要素の表示が切り替わることがある。これはcssのdisplayプロパティとjavascriptを使用して実装することができる。

cssのdisplayプロパティについて
displayプロパティの値 状態
none 隠れる
block ブロックレベルで表示

displayプロパティを切り替える仕組みを作れば、画面上の要素について表示・非表示を制御できる。以下にコード例を作成した。

<script type="text/javascript">
<!--
 // ボタン押下時に実行する関数
 function changeDisplay(id)
 {
   if (document.getElementById(id).style.display == "none") {
     // 隠れている場合には表示する
     document.getElementById(id).style.display = "block";
   } else {
     // 表示している場合には隠す
     document.getElementById(id).style.display = "none";
   }
 }
// -->
</script>
<div id="display_area" style="display:block;">
    表示・非表示が切り替わる部分
</div>
<input type="button" onclick="changeDisplay('display_area')" value="表示・非表示">
関連記事
スポンサーサイト



  

テーマ : プログラミング
ジャンル : コンピュータ

コメント

非公開コメント

検索フォーム
プロフィール

サトリヒロシ

Author:サトリヒロシ
ビジネスを重視した企画を支援したいエンジニアが、何かを書こうとするブログです。

サトリ潜伏先
サトリ倉庫

WEB関連の技術で調査リクエストがあればご連絡ください。

カレンダー
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
カテゴリ
最新記事
最新コメント
最新トラックバック
月別アーカイブ
RSSリンクの表示
リンク
QRコード
QRコード
FC2カウンター
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。