未分類

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

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

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();
});

対処方法

scriptで制御するものはscript

cssで制御するものはcss

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

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

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

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