ここから本文です

classを指定してのstyleでdisplay:none;にする方法についてです。

shi********さん

2016/1/1422:32:43

classを指定してのstyleでdisplay:none;にする方法についてです。

<script>
function shoukyo(){
var kesu = document.getElementById('aaa');
kesu.style.display = "none";
}
</script>

<div id = "aaa" class = "apple">あああ</div>
<button onclick="shoukyo()">消す</button>

このようなIDを消すのはできますが、


<script>
function shoukyo(){
var kesu = document.getElementsByClassName('apple');
kesu.style.display = "none";
}
</script>

<div id = "aaa" class = "apple">あああ</div>
<button onclick="shoukyo()">消す</button>


だと消えません。
classを指定して消す方法はIDの場合とは違うのでしょうか?

閲覧数:
4,361
回答数:
1
お礼:
25枚

違反報告

ベストアンサーに選ばれた回答

プロフィール画像

カテゴリマスター

sii********さん

2016/1/1500:46:40

getElementsByClassNameは「Elements」と複数形になっていますよね。getElementsByTagNameも同じです。

これらの関数では、(結果的に対象の要素が1つだけでも)複数の要素がまとめられた「ノードリスト」という、配列のような形で結果が返ってきますので、配列の1つ1つの要素を取り扱うときのように繰り返し処理をしなければなりません。

--------------------
<!DOCTYPE html>
<meta charset="utf-8">
<title>sample</title>
<body>

<script>
function shoukyo(){
var kesu = document.getElementsByClassName('apple');
for(var i = 0; i < kesu.length; i++) {
kesu[i].style.display = "none";
}
}
</script>

<div id="aaa" class="apple">あああ</div>
<div id="bbb" class="apple">いいい</div>

<button onclick="shoukyo()">消す</button>

</body>
--------------------

  • 質問者

    shi********さん

    2016/1/1503:01:21

    できました!
    なるほど、"s"がつくのはそういう意味だったのですね。とても勉強になりました。ありがとうございました!

返信を取り消しますが
よろしいですか?

  • 取り消す
  • キャンセル

質問した人からのコメント

2016/1/15 03:01:37

とても勉強になりました!

あわせて知りたい

みんなで作る知恵袋 悩みや疑問、なんでも気軽にきいちゃおう!

Q&Aをキーワードで検索:

Yahoo! JAPANは、回答に記載された内容の信ぴょう性、正確性を保証しておりません。
お客様自身の責任と判断で、ご利用ください。
本文はここまでです このページの先頭へ

「追加する」ボタンを押してください。

閉じる

※知恵コレクションに追加された質問は選択されたID/ニックネームのMy知恵袋で確認できます。

不適切な投稿でないことを報告しました。

閉じる