プログラミングの必須処理: テキストやボタンの表示非表示の活用法( visibility , display )

おはようございます、hamatakeBlogです！

JavaScript入門！この記事は、JavaScriptの学習をすでに始めているかた向けの記事となっています。

超初心者編は、こちら⇓からどうぞ！

【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog

今回は

ボタンやテキストの表示非表示切り替え処理を実行する方法

をご紹介します。

・特定の条件の時に表示したい！

・ボタンが押されたら表示、もう一回ボタン押したら非表示にしたい！

などの処理を実装したい人向けの記事となります！

ということで、今回はボタンクリックした時、テキスト表示非表示切り替えをする処理を作っていきます！

完成イメージはこんな感じ⇓

---ここにテキスト表示---

テキストが表示されました！

----------------------------

Style visibilityで表示非表示
Style displayで表示非表示
まとめ

それではやっていきましょう！

Style visibilityで表示非表示

対象の要素にstyle.visibilityを設定することで、文章のレイアウトを変更することなく表示表示を切り替えることができるます。

style.visibilityの要素をJavascriptで付け替える方法を教えます。

まずは、HTMLを準備します。

<body>

<button type="button" id="btn1">テキストを表示切替！</button>

// style visibility : visible でテキストを表示させる

<p id="toggleText1" style="visibility : visible">テキストが表示できました！

</p>

</body>

※今回ボタンタグにフィーチャーするためheadタグなどは省略して記載しています。

詳しくは、こちら⇓の記事を参考にしてHTMLを作成してください。

【JavaScript★独学でも大丈夫★】初心者が3か月で案件デビューしたJavaScript勉強法！！その１ - hamatakeBlog

続いてJavascript

sample.js

// document.getElementById()でHTMLの中でid属性がbtnの要素を取得し、変数buttonに代入する

let button1 = document.getElementById('btn1');

// addEventListenerでボタンのクリックイベント時に処理を実行
button1.addEventListener("click",function() {

// id属性がtoggleTextの要素を取得
let text1 = document.getElementById('toggleText1');

// text の style visibility の状態で分岐条件を設定
if(text1.style.visibility === 'visibility'){
text1.style.visibility = 'hidden';
} else {
text1.style.visibility = 'visible';
}
});

完成形はこんな感じ！↓

テキストが表示されました！

Styleメモ

style.visibility
文章のレイアウトを変更することなく表示表示を切り替えることができる
visible
style.visibilityに設定することで対象を表示状態にする
hidden
style.visibilityに設定することで対象を非表示状態にする

Style displayで表示非表示

対象の要素にstyle.dipslayを設定することで、表示表示を切り替えることができるます。(※visibilityと違いレイアウトまで非表示となるので注意！)

style.displayの要素をJavascriptで付け替える方法を教えます。

まずは、HTMLを準備します。

<body>

<button type="button" id="btn2">テキストを表示切替！</button>

// style display: block でテキストを表示させる

<p id="toggleText2" style="display: block">テキストが表示できました！

</p>

</body>

sample.js

let button2 = document.getElementById('btn2');

button2.addEventListener("click",function() {

let text2 = document.getElementById('toggleText2');

// text の style display の状態で分岐条件を設定
if(text2.style.display === 'block'){
text2.style.display = 'none';
} else {
text2.style.display = 'block';
}
});

完成形はこんな感じ！↓

テキストが表示されました！

Styleメモ