『JavaScript』style.displayで値を取得できない原因と取得方法

先日、display:block or none でif文の判定をしようとstyle.displayで値を取得しようとしたところ、””しか返って来なかったのでいろいろ調べてみた。

style=”display:〇〇”しか取得できない

HTMLのインラインに記載されるstyle=”display:〇〇”しか取得が出来ません。

自分の場合は、classで指定したdisplay:noneを取得しようとしていた為、style.displayで取得する事ができませんでした。

ダメなパターン

<p class="hoge"> ほげ </p>

.hoge {
  display: none;
}

大丈夫なパターン

<p style="display: none"> ほげ </p>

インラインで確認できます。

もしくは、JavaScriptなどのscriptで付与している場合

const display = document.getElementsByTagName( "p" );
function() {
  display.style.display ="none";
};

jQuery(function () {
  jQuery("p").hidden();
});

こちらも結果的に、HTMLのアウトラインから確認する事が出来ます。

対処方法

scriptで制御するものはscript

cssで制御するものはcss

上記のセオリーに従って、style.displayを使用して判定をしたい場合はあらかじめ

document.getElementsByTagName( "p" ).style.display = "none"

としてあげることで、style=display:noneが設定される。

そうすることで、style.displayで判定ができる様になります。