FC2ブログ

スポンサーサイト

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

ボタンクリックで表示・非表示切り替え

ボタンをクリックすると、指定したid名の要素を表示・非表示切り替えするJavaScriptの覚え書き。 ・オブジェクト.getElementById(id名)
  指定されたID名を持つオブジェクトの情報を返す。
  オブジェクトがdocumentであればドキュメント上のオブジェクトの中からID名を参照し
  (document.getElementById(id名))、
   XMLデータであればXMLデータ上のオブジェクトの中からID名を検索し
  該当するオブジェクトの情報を返す。
  (XMLオブジェクト.getElementById(id名))

・document.getElementById(id名).style.visibility
  指定したid名のスタイル(visibility)の値を取得する。
  "visible"、"hidden"の値を与えて表示・非表示を指定することができる。

。。JavaScriptファイルの例。。(ファイル名divtest.js)

function disp(){
//表示・非表示するid名
var divname="samp";
//現在のスタイル属性visibility値を取得
var sflag=document.getElementById(divname).style.visibility;
//現在hidden(非表示)の場合はvisible(表示)に
//それ以外の場合はhidden(非表示)にする
if(sflag=="hidden"){
document.getElementById(divname).style.visibility="visible";
}else{
document.getElementById(divname).style.visibility="hidden";
}
}

。。htmlファイルの例。。

<html>
<head>
<!--使用するJavaScriptファイル-->
<script type="text/javascript" src="divtest.js"></script>
</head>
<body>
<!--クリックするとdisp()が呼び出される-->
<form>
<input type="button" value="ボタン" onclick="disp();" />
</form>
<!--ボタンをクリックすると表示・非表示されるテキスト-->
<div id="samp" >表示・非表示</div>
</body>
</html>
スポンサーサイト


コメント

コメントの投稿

Ayaにだけ表示を許可する時はここをチェック

トラックバック

http://curiousabt.blog27.fc2.com/tb.php/81-efe821df

 |  HOME | 

Calendar

« | 2018-12 | »
S M T W T F S
- - - - - - 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 - - - - -

Tags

Recent Entries

Categories

About Me

Aya

Aya

落書き好きの
一応webクリエーター。
日々勉強中(;´Д`)
マイペースに覚書や日記を
書いて行くつもり

RSS

Monthly

ひとこと!

Recent Comments

-->

Blog Pet

Recent Trackbacks

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