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

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

 

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

 

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

 

 

目次

 

style.display プロパティとは

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

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

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

// getElementById や querySelector などで要素を取得

let element = document.getElementById("targetId");

// 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。 おうち大好きマンです。

 

 

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

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