MENU
  1. ホーム
  2. JavaScript
  3. JavaScriptのhide()が効かない理由と対処法

JavaScriptのhide()が効かない理由と対処法

JavaScript

次のようなコードを書いて、JavaScriptのhide()が効かないと悩んでいませんか？

const image = document.querySelector("img");
const button = document.querySelector("button");

button.addEventListner("click", () => {
    image.hide();
});

この記事では、JavaScriptのhide()が効かない理由と効かない時の対処法を解説します。

目次

JavaScriptのhide()が効かない理由

hide()は、jQueryのメソッドであり、以下のように利用します。

$(".target").hide();

$(".target")の部分は、jQueryオブジェクトです。

そのため、JavaScriptで利用するdocument.querySelectorやdocument.getElementByIdに対して、hide()を適用しても効きません。

JavaScriptのhide()が効かない時の対処法

対処法は主に2つあります。

  • jQueryを利用する
  • JavaScriptの記述で置き換える

jQueryを利用する

jQueryを利用する場合は、効かない時の理由に記載したように、jQueryオブジェクトを作成する必要があります。

そのために、まずはjQueryを利用可能にします。

jQuery公式サイトより、jQueryをダウンロードします。

ダウンロードしたファイルをサーバーにアップロードします。

hide()メソッドを利用したいページに、jQueryを読み込ませます。ファイルを配置した場所によって記述は異なりますが、以下のような記載になります。

<script type="text/javascript" src="assets/vendor/jquery-3.7.1.js"></script>

最後に、効かない時の理由に記載したように、jQueryオブジェクトに対してhide()メソッドを適用します。

$(".target").hide();

JavaScriptの記述で置き換える

JavaScriptの記述で置き換えるには、以下のようにstyleプロパティにアクセスする方法があります。

const image = document.querySelector("img");
const button = document.querySelector("button");

button.addEventListner("click", () => {
    image.style.display = "none";
});

他には、hiddenプロパティの値をtrueにする方法があります。

image.hidden = "true";

参考：HTMLElement: hidden プロパティ – Web API | MDN

JavaScript

関連記事

目次