JavaScriptのstyle.displayプロパティの使い方を現役エンジニアが解説【初心者向け】
sytle.display プロパティは、要素の表示に関する CSS の display の参照や更新ができます。今回は対象要素の 表示/非表示 を切り替えたり、JavaScript で要素を組み立てたりする際に使用していきましょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptで配列内の値を加算する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をみてみましょう。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptのstyle.displayプロパティの使い方について詳しく説明していくね！
お願いします！
目次
style.display プロパティとは
sytle.display プロパティとは、要素の表示に関する CSS の display の参照や更新ができるプロパティです。
ボタンクリックで対象要素の 表示/非表示 を切り替えたり、JavaScript で要素を組み立てたりする際に使用できます。
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 プロパティに設定できる内容はたくさんあるため、用途に応じてうまく使い分けてみてください。
実は私も！？独学で損する人の特徴
「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ
独学には向き不向きがあり、実はスクールが向いている人も大勢います。
そんな方のために参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
- ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
- ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った
少しでも当てはまる部分があれば、
スクールが向いているかもしれません。
お試しのつもりで、まずは一度
無料相談
に参加してみませんか？
現役エンジニア・デザイナーに何でも気軽に相談できる30分
を
すべて無料で
できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
執筆してくれたメンター
| メンター稲員
フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語：Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。 おうち大好きマンです。 |
JavaScriptで配列内の値を加算する方法がよく分かったので良かったです！
ゆかりちゃん、今後も分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
プログラミングを独学していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
厳しい試験を通過した講師
があなたの相談に真摯に向き合います。
「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」
こんな気持ちでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
