JavaScriptのstyle.displayプロパティの使い方を現役エンジニアが解説【初心者向け】

sytle.display プロパティは、要素の表示に関する CSS の display の参照や更新ができます。今回は対象要素の 表示/非表示 を切り替えたり、JavaScript で要素を組み立てたりする際に使用していきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで配列内の値を加算する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptのstyle.displayプロパティの使い方について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

style.display プロパティとは

sytle.display プロパティとは、要素の表示に関する CSS の display の参照や更新ができるプロパティです。

ボタンクリックで対象要素の 表示/非表示 を切り替えたり、JavaScript で要素を組み立てたりする際に使用できます。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

style.display プロパティの使い方

style.display プロパティの使い方は、対象の要素を getElementById や querySelector などのメソッドで取得して使用します。
// getElementById や querySelector などで要素を取得
let element = document.getElementById("targetId");
対象要素を取得したら、そのまま style.display で、CSS の display プロパティが参照可能です。
// style.display で display プロパティの値の参照
element.style.display; // => "" や "block" などの値が返ってくる

また style.display = “value” で新しい値に更新することも可能です。

// style.display = "value" で display プロパティの値の更新
element.style.display = "none"; // => "none" を設定すると非表示

style.display プロパティの注意点

style.display プロパティによる参照や更新は、あくまでも要素そのものに設定されている sytle 属性の情報にアクセスするという点に注意してください。

例えば、以下のような display_block という ID で 「display: block」に設定されている場合でも、document.getElementById(“display_block”).style.display を実行した場合に取得できるのは “” という空文字です。

<style>
<!--
 #display_block {
  display: block;
}
-->
</style>
<div id="display_block">
 Display Block
</div>

これは「要素そのものに設定されている sytle 属性の情報にアクセスする」ものです。

そのため、以下のように要素そのものに「style=”display: block;”」が設定されていれば、style.display で “block” という値を取得可能です。

<div id="display_block" style="display: block;">
 Display Block
</div>

実際に書いてみよう

実際に、Chrome の Developer Tools を使って試してみましょう。

Developer Tools の開き方は Windows だと [F12] キー、Mac だと [Command] + [Shift] + [I] になり、開いたら「Console」タブを選択します。

まずは TechAcademy Magazine のページを開いた後に、以下のコードを打ち込んでみましょう。

document.getElementById("contents").style.display = "none";

記事が非表示になったのが確認できたでしょう。

以下のコードを実行すると、現在設定されている “none” が返ってきます。

 

document.getElementById("contents").style.display;

非表示になった記事を表示してみましょう。

以下のコードを実行してみてください。

 

document.getElementById("contents").style.display = "";

今回はわかりやすい例として、表示と非表示というかたちにしました。

そのうえで、display プロパティに設定できる内容はたくさんあるため、用途に応じてうまく使い分けてみてください。

 

執筆してくれたメンター

メンター稲員

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。

おうち大好きマンです。

 

大石ゆかり

JavaScriptで配列内の値を加算する方法がよく分かったので良かったです!

田島悠介

ゆかりちゃん、今後も分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。